HTML DOM fullscreenElement प्रॉपर्टी का उपयोग उस तत्व को लौटाने के लिए किया जाता है जो वर्तमान में फुल स्क्रीन मोड में प्रदर्शित हो रहा है। यदि दिया गया तत्व फुलस्क्रीन में नहीं है तो यह null लौटाएगा।
सिंटैक्स
fullscreenElement प्रॉपर्टी के लिए सिंटैक्स निम्नलिखित है:
document.fullscreenElement
fullscreenElement प्रॉपर्टी का एक उदाहरण देखते हैं:
नोट - इस उदाहरण में केवल मानक सिंटैक्स और Chrome, Safari और Opera के लिए ब्राउज़र उपसर्ग है। अपने ब्राउज़र उपसर्ग के लिए अंतिम खंड देखें।
उदाहरण
एक उदाहरण देखते हैं:
<!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>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
"Go fullscreen" पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने पहले id "image" वाले तत्व और src एट्रिब्यूट मान के रूप में एक छवि लिंक बनाया:
<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
हमने फिर एक "Go fullscreen" बटन बनाया जो उपयोगकर्ता द्वारा क्लिक किए जाने पर EnableFullScreen() मेथड को निष्पादित करेगा:
<button onclick="EnableFullScreen()">Go fullscreen</button>
EnableFullScreen() मेथड document ऑब्जेक्ट के getElementById() मेथड का उपयोग करके img तत्व प्राप्त करता है और इसे वेरिएबल elem में असाइन करता है। requestFullScreen प्रॉपर्टी का उपयोग करके, हम जांचते हैं कि क्या तत्व को फुलस्क्रीन मोड में खोला जा सकता है या नहीं img तत्व पर requestFullScreen प्रॉपर्टी का उपयोग करके।
यदि वह तत्व फुलस्क्रीन में खोला जा सकता है तो हम फिर उस तत्व को फुलस्क्रीन मोड में प्राप्त करने के लिए requestFullScreen() मेथड का उपयोग करते हैं। यदि तत्व को फुलस्क्रीन मोड में प्रदर्शित नहीं किया जा सकता है, तो हम console.log() मेथड का उपयोग करके कंसोल में कुछ संदेश प्रदर्शित करते हैं।
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') }
चूंकि तत्व के फुलस्क्रीन होने के बाद हम किसी चीज़ पर क्लिक नहीं कर सकते, हम setTimeout(fullscreenEle,8000) मेथड का उपयोग यह निर्दिष्ट करने के लिए करते हैं कि इसे 8000ms (8 सेकंड) के बाद fullscreenEle() मेथड निष्पादित करना चाहिए:
setTimeout(FullscreenEle, 8000);
FullscreenEle() फ़ंक्शन उस तत्व को लौटाता है जो वर्तमान में फुलस्क्रीन मोड में है और console.log() मेथड का उपयोग करके हम कंसोल टैब में तत्व प्रदर्शित करते हैं:
function FullscreenEle() { console.log(document.fullscreenElement|| /*Standard Syntax*/ document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/ }
नोट - आपको अपने इच्छित ब्राउज़र के लिए इस उदाहरण को काम करने के लिए विशिष्ट उपसर्गों का उपयोग करना होगा। उपरोक्त उदाहरण में हमने केवल मानक सिंटैक्स और Chrome, Opera और Safari ब्राउज़र के लिए ब्राउज़र उपसर्ग लिखा है। नीचे आपके ब्राउज़र के लिए कुछ उपसर्ग हैं।
- requestFullscreen के लिए
- Firefox: mozRequestFullScreen
- IE/Edge: msRequestFullscreen
- fullscreenElement के लिए
- Firefox: mozFullScreenElement
- IE/Edge: msRequestFullscreen
