HTML DOM फ़ुलस्क्रीन एलीमेंट प्रॉपर्टी का उपयोग उस तत्व को वापस करने के लिए किया जाता है जो वर्तमान में फ़ुल स्क्रीन मोड में प्रदर्शित होता है। यदि दिया गया तत्व पूर्णस्क्रीन में नहीं है तो यह शून्य वापस आ जाएगा।
सिंटैक्स
फुलस्क्रीन एलीमेंट प्रॉपर्टी के लिए सिंटैक्स निम्नलिखित है -
document.fullscreenElement
आइए हम फ़ुलस्क्रीन एलीमेंट प्रॉपर्टी का एक उदाहरण देखें -
नोट - इस उदाहरण में केवल क्रोम, सफारी और ओपेरा के लिए मानक सिंटैक्स और ब्राउज़र उपसर्ग है। अपने ब्राउज़र उपसर्ग के लिए, अंतिम अनुभाग देखें।
उदाहरण
आइए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<script>
function FullscreenEle() {
console.log(document.fullscreenElement || /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}
setTimeout(FullscreenEle, 8000);
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
}
</script>
</head>
<body>
<h1>Learn Blockchain</h1>
<img id="image" src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"पूर्ण स्क्रीन पर जाएं" क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने सबसे पहले आईडी “इमेज” के साथ एक एलीमेंट और src एट्रीब्यूट वैल्यू के रूप में एक इमेज लिंक बनाया है -
<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
हमने तब एक "फुलस्क्रीन पर जाएं" बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर EnableFullScreen() विधि को निष्पादित करेगा -
<button onclick="EnableFullScreen()">Go fullscreen</button>
EnableFullScreen () विधि दस्तावेज़ ऑब्जेक्ट getElementById () विधि का उपयोग करके img तत्व प्राप्त करती है और इसे चर elem को असाइन करती है। RequestFullScreen प्रॉपर्टी का उपयोग करके, हम जांचते हैं कि क्या एलिमेंट को फुलस्क्रीन मोड में खोला जा सकता है या img एलिमेंट पर रिक्वेस्टफुलस्क्रीन प्रॉपर्टी का उपयोग नहीं कर रहा है।
यदि वह तत्व पूर्णस्क्रीन में खोला जा सकता है तो हम उस तत्व को पूर्णस्क्रीन मोड में प्राप्त करने के लिए requestFullScreen() विधि का उपयोग करते हैं। यदि तत्व को फ़ुलस्क्रीन मोड में प्रदर्शित नहीं किया जा सकता है, तो हम कंसोल में कुछ संदेश कंसोल.लॉग () विधि का उपयोग करके प्रदर्शित करते हैं।
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
} चूंकि तत्व के पूर्ण स्क्रीन पर जाने के बाद हम किसी भी चीज़ पर क्लिक नहीं कर सकते हैं, हम यह निर्दिष्ट करने के लिए सेटटाइमआउट (फुलस्क्रीनएले, 8000) विधि का उपयोग करते हैं कि इसे 8000ms (8s) के बाद फुलस्क्रीनएले () विधि निष्पादित करनी चाहिए -
setTimeout(FullscreenEle, 8000);
FullscreenEle() फ़ंक्शन उस तत्व को लौटाता है जो वर्तमान में पूर्णस्क्रीन मोड में है और कंसोल.लॉग() विधि का उपयोग करके हम तत्व को कंसोल टैब में प्रदर्शित करते हैं -
function FullscreenEle() {
console.log(document.fullscreenElement|| /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
} नोट - अपने इच्छित ब्राउज़र के लिए काम करने के लिए आपको इस उदाहरण के लिए विशिष्ट उपसर्गों का उपयोग करना होगा। उपरोक्त उदाहरण में हमने केवल क्रोम, ओपेरा और सफारी ब्राउज़र के लिए मानक सिंटैक्स और ब्राउज़र उपसर्ग लिखा है। आपके ब्राउज़र के लिए कुछ उपसर्ग नीचे दिए गए हैं।
- अनुरोध के लिएपूर्णस्क्रीन
- फ़ायरफ़ॉक्स:mozRequestFullScreen
- आईई/एज:msRequestFullscreen
- पूर्णस्क्रीन तत्व के लिए
- फ़ायरफ़ॉक्स:mozFullScreenElement
- आईई/एज:msRequestFullscreen