一. 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.clientHeight
document.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>