Browser Object Model (BOM) อนุญาตให้ JavaScript "พูดคุยกับ" เบราว์เซอร์
ไม่มีมาตรฐานอย่างเป็นทางการสำหรับ Browser Object มรุ่น (BOM)
เนื่องจากเบราว์เซอร์สมัยใหม่ได้ใช้ (เกือบ) วิธีการเดียวกันและ คุณสมบัติสำหรับการโต้ตอบของ JavaScript มักเรียกกันว่าวิธีการ และ คุณสมบัติของ BOM
เบราว์เซอร์ทั้งหมดรองรับออบเจ็กต์ window มันเป็นตัวแทนของ หน้าต่างของเบราว์เซอร์
ออบเจ็กต์ ฟังก์ชัน และตัวแปร JavaScript ทั่วโลกทั้งหมดจะกลายเป็นโดยอัตโนมัติ สมาชิกของวัตถุหน้าต่าง
ตัวแปรโกลบอลเป็นคุณสมบัติของวัตถุหน้าต่าง
ฟังก์ชันโกลบอลเป็นวิธีการของวัตถุหน้าต่าง
แม้แต่วัตถุเอกสาร (ของ HTML DOM) ก็เป็นคุณสมบัติของหน้าต่าง วัตถุ:
window.document.getElementById("header");เหมือนกับ:
document.getElementById("header");สามารถใช้คุณสมบัติสองอย่างเพื่อกำหนดขนาดของเบราว์เซอร์ หน้าต่าง.
คุณสมบัติทั้งสองส่งคืนขนาดเป็น พิกเซล:
window.innerHeight - ความสูงด้านในของหน้าต่างเบราว์เซอร์ (เป็นพิกเซล)
window.innerWidth - ความกว้างด้านในของหน้าต่างเบราว์เซอร์ (เป็นพิกเซล)
หน้าต่างเบราว์เซอร์ (วิวพอร์ตของเบราว์เซอร์) ไม่รวมแถบเครื่องมือและแถบเลื่อน
let w = window.innerWidth;
let h = window.innerHeight;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Window</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Browser inner window width: " + window.innerWidth + "px<br>" +
"Browser inner window height: " + window.innerHeight + "px";
</script>
</body>
</html>
วิธีการอื่นๆ:
window.open() - เปิดหน้าต่างใหม่
window.close() - ปิดหน้าต่างปัจจุบัน
window.moveTo() - ย้ายหน้าต่างปัจจุบัน
window.resizeTo() - ปรับขนาดหน้าต่างปัจจุบัน