คุณสมบัติ HTML DOM fullscreenElement

คุณสมบัติ fullscreenElement ของ HTML DOM ใช้สำหรับคืนค่าองค์ประกอบที่กำลังแสดงในโหมดเต็มจออยู่ จะคืนค่า null หากองค์ประกอบนั้นไม่ได้อยู่ในโหมดเต็มจอ

ไวยากรณ์ (Syntax)

document.fullscreenElement

ตัวอย่าง (Example)

หมายเหตุ: ตัวอย่างนี้มีเฉพาะไวยากรณ์มาตรฐานและ prefix สำหรับ 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>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิก "Go fullscreen":

คำอธิบายโค้ด

สร้างองค์ประกอบ img id "image" พร้อมลิงก์รูปภาพ:

<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">

สร้างปุ่ม "Go fullscreen" ทำงาน EnableFullScreen() เมื่อคลิก:

<button onclick="EnableFullScreen()">Go fullscreen</button>

EnableFullScreen() ดึง img element มาเก็บในตัวแปร elem ตรวจสอบ requestFullscreen property หากเปิดเต็มจอได้ จะใช้ requestFullscreen() มิฉะนั้นจะแสดงข้อความใน console:

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) รัน fullscreenEle() หลัง 8 วินาที:

setTimeout(FullscreenEle, 8000);

FullscreenEle() คืนค่าองค์ประกอบที่อยู่ในโหมดเต็มจอ และแสดงใน console:

function FullscreenEle() { 
  console.log(document.fullscreenElement|| /*Standard Syntax*/ 
  document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/ 
}

หมายเหตุ: ต้องใช้ prefix เฉพาะเบราว์เซอร์ ตัวอย่างมีแค่มาตรฐานและ Chrome/Opera/Safari prefix อื่นๆ:

• สำหรับ requestFullscreen
  • Firefox: mozRequestFullScreen
  • IE/Edge: msRequestFullscreen
• สำหรับ fullscreenElement
  • Firefox: mozFullScreenElement
  • IE/Edge: msRequestFullscreen