橘子味的心
标题: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() - 调整当前窗口的大小

目录

分类