window对象
BOM的核心对象是window,代表浏览器的一个实例。既是通过JavaScript访问浏览器的一个接口,又是ECMAScript规定的Global对象。在网页中定义的任何一个对象,变量,函数都以window作为其Global对象。
全局作用域
所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。
全局变量的属性不能使用delete操作符删除,直接在window上定义的属性可以。
var age = 29;
window.color = "red";
//在IE < 9 时抛出错误,其他浏览器都returns false
delete window.age;
//在IE < 9 时抛出错误,其他浏览器都returns true
delete window.color;
console.log(window.age);//29
console.log(window.color);//undefined
访问未声明的对象会抛出错误,通过查询window对象可以知道某个未声明的对象是否存在。
// var newValue = oldValue;//拋错
//不会拋错,因为这是一次属性查询
var newValue = window.oldValue;//newValue为undefined
窗口关系及框架
如果页面中包含框架(frame)则每个框架拥有自己的window对象,并保存在frames集合中。在frames集合中,可以通过数值索引或者框架名称来访问相应的 window对象。
每个window对象都包含一个name属性,其中包含框架名称。
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<frameset rows="160, *">
<frame src="" name="topFrame">
<frameset cols="50%, 50%">
<frame src="" name="leftFrame">
<frame src="" name="rightFrame">
</frameset>
</frameset>
</html>
以上代码创建了一个框架集。
可以用window.frames[0]
或window.frame["topFrame"]
来访问上方的frame。
最好使用top来引用frame,eg:top.frames[0]
或top.frame["topFrame"]
top
对象始终指最高层的对象(浏览器的窗口)。
parent
对象始终指向当前框架的直接上层框架。在没有框架的情况下,parent一定等于top。
self
对象始终指向window。
在使用框架的情况下,浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。
框架位置
window.screenLeft/Top或window.screenX/Y:返回浏览器左边界到操作系统桌面左边界/顶部的水平距离。
使用下列代码可以跨浏览器取得窗口左边和上边的位置。无法在跨浏览器条件下取得精确坐标值。
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
window.moveTo(x, y)
将当前窗口移动到指定的坐标位置。
window.moveBy(deltaX, deltaY)
根据指定的值,移动当前窗口。
这两个方法可能会被浏览器禁用;只对最外层的window对象使用。
//将窗口移到屏幕左上角
window.moveTo(0, 0);
//讲窗口向下移动100像素
window.moveBy(0,100);
窗口大小
但却可以取得页面视口的大小
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
//判断是否处于标准模式
if (document.compatMode == "SCC1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法与移动窗口位置的方法类似,也有可能被浏览器禁用;这两个方法同样不适用于框架,而只能对最外层的window对象使用。
导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。
这个方法可以接收4个参数:要加载的URL、窗口目标、一个特性字符串、个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
如果为window.open()传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
弹出窗口
如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数,那么就会打开一个带有全部设置(工具栏、地址栏和状态栏等)的新浏览器窗口。在不打开新窗口的情况下,会忽略第三个参数。
//这行代码会在topFrame打开一个新的可以调整大小的窗口,
//窗口初始大小为400x400像素,并且距屏幕上沿和左边各10像素。
var wrox = window.open("http://wrox.com", "xx",
"height=400,width=400,top=10,left=10,resizable=yes");
wrox.resizeTo(300, 500);
//关闭用open()打开的弹窗窗口,弹出窗口关闭之后,窗口的引用仍然还在。
wrox.close();
window.open()方法会返回一个指向新窗口的引用。
新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象。这个属性只在弹出窗口的最外层window对象(top)中有定义,而且指向调用window,open()的窗口或框架。
var goser = window.open("http://wrox.com", "topFrame", "height=400,width=400,top=10,left=10,resizable=yes");
alert(goser.opener == window); //true
有些浏览器(如IE8和Chrome)会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时,如果两个window对象之间需要彼此通信,那么新标签页就不能运行在独立的进程中。在Chrome中,将新创建的标签页的opener属性设置为null,即表示在单独的进程中运行新标签页。
var goser = window.open("http://wrox.com", "topFrame", "height=400,width=400,top=10,left=10,resizable=yes");
goser.opener = null;
标签页之间的联系一旦切断,将没办法恢复。
setTimeout()和setInterval()
setTimeout()
间歇调用
setInterval()
超时调用
这两个方法会返回一个数值ID,该ID可以用于取消将来某个时刻的间歇调用/超时调用。
超时调用都是在全局作用域中执行的,因此函数中的this在非严格模式下指向window对象,在严格模式下是undefined。
var timeoutId = setTimeout();
var intervalId = setInterval();
clearTimeout(timeoutId);
this.clearInterval(intervalId);
最好不要使用间歇调用,最好使用超时调用模拟间歇调用,eg.
var num = 0;
var max = 10;
function incrementNumber() {
num++;
if (num === max) {
setTimeout(incrementNumber, 500);
}else {
alert('Done');
}
}
setTimeout(incrementNumber, 500);
系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。
它们的外观由操作系统及(或)浏览器设置决定。
显示对话框的时候代码会停止执行,关掉对话框后代码会恢复执行。
location对象
它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。
location对象是很特别的一个对象,因为它既是window对象的属性,也是document对象的属性。
window.location和document.location引用的是同一个对象。
下表列出了location对象的所有属性
属性名 | 例子 | 说明 |
---|---|---|
hash | “#contents” | 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串。 |
host | “www.wrox.com:80” | 返回服务器名称和端口号(如果有) |
hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
href | “http:/www.wrox.com” | 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
pathname | “/WileyCDA/” | 返回URL中的目录和(或)文件名 |
port | “8080” | 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串 |
protocol | “http:” | 返回页面使用的协议。通常是“http”或“https” |
search | “?q=javascript” | 返回URL的查询字符串。这个字符串以问号开头 |
。。。。