JavaScript Window - 浏览器对象模型

Browser Object Model (Browser Object Model (Browser Object Model (BOM)) ay nagbibigay sa JavaScript ang pag-uusap sa browser.

Browser Object Model (Browser Object Model (BOM))

Wala ang opisyal na standard ng Browser Object Model (BOM).

Ang modernong browser ay (hindi kailanman) nagpatupad ng mga paraan at katangian ng JavaScript interaction, kaya ito ay palaging nababanggit bilang mga paraan at katangian ng BOM.

Window object

Ang lahat ng browser ay sumusuporta sa window Object. Ito ay kumakatawan sa bintana ng browser.

Ang lahat ng pangkalahatang JavaScript object, function at variable ay awtomatikong naging miyembro ng window object.

Ang mga pangkalahatang variable ay mga katangian ng window object.

Ang mga pangkalahatang function ay mga paraan ng window object.

Kahit na ang (HTML DOM) na document object ay isang katangian ng window object:

window.document.getElementById("header");

Kasamaan sa:

document.getElementById("header");

Sukat ng bintana

Ang dalawang katangian na ito ay puwedeng gamitin upang matukoy ang sukat ng bintana ng browser.

Ang dalawang katangian na ito ay nagbibigay ng sukat sa paksi ng pixel:

  • window.innerHeight - Ang panloob na taas ng bintana ng browser (sa paksi ng pixel)
  • window.innerWidth - Ang panloob na lapad ng bintana ng browser (sa paksi ng pixel)

Ang bintana ng browser (ang viewport ng browser) ay hindi kasama ang toolbar at scrollbar.

Para 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() -重新调整当前窗口