JavaScript window

Browser Object Model (BOM)浏览器对象模型，允许JavaScript跟浏览器交互.

Browser Object Model (BOM)

Browser Object Model (BOM)浏览器对象模型，没有官方标准.

由于现代的浏览器已经实现了（几乎）JavaScript交互相同的方法和属性, 它经常被参考, 作为BOM的方法和属性.

Window窗口对象

所有浏览器支持窗口对象. 它代表浏览器的窗口.

所有的全局JavaScript对象，函数和变量自动成为窗口对象的成员.

全局变量是窗口对象的属性.

全局函数是窗口对象的方法.

甚至文档对象（的HTML DOM）也是窗口的属性对象:

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() - 调整当前窗口的大小