เมธอด exitFullscreen() ใน HTML DOM

เมธอด exitFullscreen() ใน HTML DOM ใช้สำหรับออกจากโหมดเต็มหน้าจอ (fullscreen mode) ขององค์ประกอบที่อยู่ในโหมดเต็มหน้าจออยู่ หากเรียกใช้บนองค์ประกอบที่ไม่อยู่ในโหมดเต็มหน้าจอ จะไม่ทำอะไรเลย

ไวยากรณ์ (Syntax)

HTMLElementObject.exitFullscreen()

ตัวอย่าง

ตัวอย่างการเข้าสู่และออกจากโหมดเต็มหน้าจอ:

<!DOCTYPE html>
<html>
<head>
<script>
  var docEl = document.documentElement;
  
  function GoNormal() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
  
  function GoFullscreen() {
    if (docEl.requestFullscreen) {
      docEl.requestFullscreen();
    }
  }
</script>
</head>
<body>
<h1>ตัวอย่างเมธอด exitFullscreen()</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<p>The Eiffel Tower was built on 28 January 1887</p>
<button onclick="GoFullscreen()">Fullscreen View</button>
<button onclick="GoNormal()">Normal view</button>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงรูปภาพ หัวข้อ และปุ่ม "Fullscreen View" และ "Normal view"

เมื่อคลิก "Fullscreen View" หน้าเว็บจะเข้าสู่โหมดเต็มหน้าจอ

กดปุ่ม Esc หรือคลิก "Normal view" จะกลับสู่ขนาดปกติ

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

• เก็บ document.documentElement (องค์ประกอบ <html>) ไว้ใน docEl
• สร้างปุ่ม "Fullscreen View" เรียก GoFullscreen() และ "Normal view" เรียก GoNormal()
• GoFullscreen() ตรวจสอบ docEl.requestFullscreen แล้วเรียก docEl.requestFullscreen() เข้าสู่โหมดเต็มหน้าจอ
• GoNormal() ตรวจสอบ document.exitFullscreen แล้วเรียก document.exitFullscreen() ออกจากโหมดเต็มหน้าจอ
• ใช้ if ตรวจสอบการรองรับเบราว์เซอร์ก่อนเรียกใช้

หมายเหตุ: โค้ดตัวอย่างเดิมวาง script ผิดที่ (อยู่ใน style tag) ได้แก้ไขให้ถูกต้องแล้ว