一. window对象
BOM 的核心对象是 window ,它表示浏览器的一个实例。在浏览器中, window 对象有双重角色,
它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。
通过window可以操作整个浏览器。
BOM图谱:

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
二. 全局作用域
由于 window对象同时扮演着 ECMAScript中 Global 对象的角色,
因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
注意:有三种获取全局变量的方式。
<script type="text/javascript">
var age = 29; //声明一个全局变量
function sayAge() { //声明一个全局函数
alert(this.age);//this表示,调用这个函数时使用的对象。将来是通过window调用的,所以this指代的window
}
// 全局变量成为了window对象的属性。 所以可以通过window.age访问
alert(window.age); //29
sayAge(); //29
// 全局函数成为了window对象的方法。 所以可以通过window.sagAge() 来访问。
window.sayAge(); //29
</script>
//提示:虽然可以通过window对象来调用,但是实际开发的时,一般都省略window。
三. 获取窗口大小
在
Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari:window.innerHeight- 浏览器窗口的内部高度window.innerWidth- 浏览器窗口的内部宽度
var msg = "窗口宽度:" + window.innerHeight + "\n窗口高度:" + window.innerWidth; alert(msg );对于
Internet Explorer 8、7、6、5:(Chrome和Firefox也支持)document.documentElement.clientHeightdocument.documentElement.clientWidth
var msg = "窗口宽度:" + document.documentElement.clientWidth + "\n窗口高度:" + document.documentElement.clientHeight; alert(msg);- 为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器)
var w = window.innerWidth || document.documentElement.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight; alert("窗口宽度:" + w + "\n窗口高度:" + h);
四. 打开窗口
var w = open(url,name[,features])
方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
返回值
w是打开的新窗口的引用.(也就是新窗口内部的那个window对象)url: 新窗口需要载入的url地址。url可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。- 如果为空字符串, 则打开一个新的空白文档
name: 新窗口的名称.注意不是新窗口的标题
_blank就是打开新文档. 如果传空字符串就是这个._self在当前页面打开新的文档abcd打开如果名字已经存在, 则会在哪个页面重新打开.
features: 一些可选参数, 列出新窗口的一些特征.
打开新的窗口,窗口特性全部使用默认值
<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
function openAnother () {
window.open("http://www.atguigu.com/"); //打开新窗口,窗口特性全部使用默认值。
}
</script>
</body>
- 打开新的窗口,设置窗口特性
<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
var win;
function openAnother () {
win = window.open("http://www.atguigu.com/", "", "width=400, height=400, toolbar = no, menubar = no,left = 200, right = 200");
}
</script>
</body>