JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JS Window 浏览器对象模型

窗口可以是主窗口,框架集或单个框架,甚至可以是用JavaScript创建的新窗口。

窗口对象

window对象表示浏览器中的窗口。窗口对象由浏览器自动创建。

所有全局变量都是属性,函数是窗口对象的方法。

所有全局JavaScript对象,函数和变量都会自动成为window对象的成员。

文档对象是窗口对象的属性。因此,输入

window.document.write("Hello world")

与下面的相同

document.write("Hello world")

计算窗口大小

window对象提供2个属性以找出浏览器窗口视口的宽度和高度。

这两个属性均返回以像素为单位的大小:

  • -浏览器窗口的内部宽度(以像素为单位)

  • -浏览器窗口的内部高度(以像素为单位)

这是显示窗口当前大小的示例:

var h = window.innerHeight;
var w = window.innerWidth;
测试看看

对于Internet Explorer 5、6、7、8:

  • document.documentElement.clientWidth

  • document.documentElement.clientHeight

要么

  • document.body.clientWidth

  • document.body.clientHeight

跨浏览器解决方案(对于IE8和更早版本使用clientWidth和clientHeight):

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

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
测试看看

使用onresize事件显示高度和宽度:

<body onresize="myFunc()">
<script>
function myFunc() {
   var w = window.innerWidth;
   var h = window.innerHeight;
   document.getElementById("para").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
测试看看

开启新窗口

方法将打开一个新的浏览器窗口,并将指定的文档加载到其中。

以下示例在具有指定高度和宽度的新窗口中打开“ www.xxs100.com”:

window.open("http://www.xxs100.com", "", "width=400, height=300");
测试看看

完整的窗口参考

有关完整的属性和方法参考,请访问我们的《JavaScript窗口对象参考》

参考部分包含所有窗口属性和方法的描述和示例。