JavaScript ฮ์ทดลองดอม - โมเดลส์แบบวินาทีของเว็บเบราวเซอร์

Browser Object Model (Browser Object Model (BOM) ที่อนุญาตให้ JavaScript สามารถประสานงานกับบราวเซอร์。

Browser Object Model (BOM)

ไม่มีมาตรฐานทางเทคนิคที่เปิดเผยสำหรับ Browser Object Model (BOM)。

บราวเซอร์สมัยใหม่ได้ (เกือบ) ทำการสามารถทำงานและคุณสมบัติของ JavaScript ที่สามารถปฏิสัมพันธ์กันได้ ดังนั้นมันมักถูกกล่าวถึงว่าเป็นวิธีและคุณสมบัติของ BOM。

อ็อบเจ็กต์ Window

ทุกบราวเซอร์ทุกครั้งสนับสนุน window อ็อบเจ็กต์

ทุกอ็อบเจ็กต์ JavaScript โลก ฟังก์ชันและตัวแปรตกลงมาเป็นสมาชิกของอ็อบเจ็กต์ window โดยอัตโนมัติ。

ตัวแปรโลกคือคุณสมบัติของอ็อบเจ็กต์ window。

ฟังก์ชันโลกคือวิธีของอ็อบเจ็กต์ window。

แม้ว่า (document ของ HTML DOM) ก็เป็นคุณสมบัติของอ็อบเจ็กต์ window:

window.document.getElementById("header");

เท่ากับ:

document.getElementById("header");

ขนาดหน้าต่าง

ทั้งสองคุณสมบัติสามารถใช้เพื่อระบุขนาดของหน้าต่างบราวเซอร์。

ทั้งสองคุณสมบัตินี้จะคืนค่าขนาดด้วยพิกเซล:

  • window.innerHeight - ความสูงของหน้าต่างบราวเซอร์ (เป็นพิกเซล)
  • window.innerWidth - ความกว้างของหน้าต่างบราวเซอร์ (เป็นพิกเซล)

หน้าต่างบราวเซอร์ (หน้าต่างมุมมองของบราวเซอร์) ไม่รวมโทรศัพท์และแถวกระดาษเลื่อน。

สำหรับ Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或

  • document.body.clientHeight
  • document.body.clientWidth

一个实用的 JavaScript 解决方案（包括所有浏览器）：

实例

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

亲自试一试

该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）

其他窗口方法

一些其他方法：

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() -移动当前窗口
  • window.resizeTo() -重新调整当前窗口