JavaScript BOM 窗口(window)

  • 浏览器对象模型(BOM)

    浏览器对象模型(BOM)允许JavaScript与浏览器“对话”。
    Browser Object Model(BOM)没有官方标准。由于现代浏览器已经(几乎)实现了JavaScript交互性的相同方法和属性,因此通常将其称为BOM的方法和属性。
  • window 对象

    所有浏览器都支持window对象。它代表浏览器的窗口。所有全局JavaScript对象,函数和变量都自动成为窗口对象的成员。全局变量是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方法

    其他一些方法:
    • window.open() - 打开一个新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的大小