HTML DOM fullscreenElement প্রপার্টি

HTML DOM fullscreenElement প্রপার্টি ব্যবহার করে বর্তমানে কোন এলিমেন্ট ফুলস্ক্রিন মোডে প্রদর্শিত হচ্ছে তা রিটার্ন করা হয়। যদি দেওয়া এলিমেন্ট ফুলস্ক্রিনে না থাকে তবে null রিটার্ন করে।

সিনট্যাক্স

fullscreenElement প্রপার্টির সিনট্যাক্স:

document.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"-এ ক্লিক করলে:

উপরের উদাহরণে:

প্রথমে আমরা "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 প্রপার্টি ব্যবহার করে চেক করা হয় যে এলিমেন্টটি ফুলস্ক্রিন মোডে খোলা যায় কিনা।

যদি এলিমেন্টটি ফুলস্ক্রিনে খোলা যায়, তবে 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) মেথড ব্যবহার করে ৮০০০ms (৮ সেকেন্ড) পর 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