js高级程序设计笔记5---BOM对象

window对象

BOM的核心对象是window对象，他表示浏览器的一个实例。它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

定义全局变量与在window对象上直接定义属性的一点差别：全局变量不能通过delete操作符删除，而直接在window对象上定义的对象可以。

var age = 28;
window.color = "red";
//在IE<9时抛出错误，在其他所有浏览器中都返回false.
delete window.age;
//在IE<9时抛出错误，在其他所有浏览器中都返回true.
delete window.color;

注意：尝试访问未声明的变量会抛出错误。但是通过查询window对象，可以知道某个可能为声明的变量是否存在。

//抛出错误
var newValue = oldValue;
//不会抛出错误，因为这是一次属性查询
var newValue = window.oldValue;//undefined

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。可以通过索引或框架名称来访问相应的window对象。

<frameset rows="100,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="anotherframeset.htm" name="rightFrame">
</frameset>
</frameset>

以上可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。不过最好使用top而非window来引用这些框架（top.frames[0]).top对象始终指向最高（外）层的框架。还有个parent对象，它始终指向当前框架的直接上层框架。

与框架有关的最后一个对象是self，他始终指向window。

窗口位置

IE,Safari,Opera,Chrome都提供了screenLeft,ScreenTop属性，分别表示窗口相应于屏幕左边和右边的位置。FireFox则提供了screenX,screenY属性。

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == "number")?window.screenTopt:window.screenY;

由于浏览器差异，最终结果就是无法再跨浏览器的条件下取得窗口左边和上边的精确坐标值。使用moveTo()和moveBy()方法可以将窗口精确地移动到一个新位置。moveTo()接收的是新位置的x和y坐标值。而moveBy（）接收的是在水平和垂直方向上移动的像素数。

//移动到屏幕左上角
window.moveTo(0,0);
//下移到100像素
window.moveBy(0,100);

这两个方法可能被浏览器禁用，而且在Opera和IE7(及更高版本）中默认及时禁用的。而且这两个方法不适用于框架。只能对最外层的window对象使用。

窗口大小

IE9+,FireFox,Safari使用outerWith,outerHeight返回浏览器窗口本身尺寸。在Opera中这两个属性表示页面视图容器的大小。而innerWidth,innerHeight表示该容器中页面视图区的大小（减去边框宽度）。在Chrome中，这四个属性返回相同的值，即视口（viewport)大小而非浏览器窗口大小。

IE,Safari,Opera,Chrome，Firefox中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。在IE6混杂模式中，必须通过document.body.clientWidth,document.body.clientHeight取得相同的信息。

虽然最终无法确定浏览器窗口的大小，但却可以取得视口的大小。

var pageWidth = window.innerWidth,
pageHeight = windwo.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}

还可以使用resizeTo(x,y),resizeBy(x差，y差)方法调整浏览器窗口大小。但是这两个办法跟移动窗口位置的方法类似，也有可能被浏览器禁用且对框架无用。

导航和打开窗口

window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法接收四个参数：

1. 要加载的URL

2. 窗口目标.(可以是框架的名称，也可以是_self,_parent,_top,_blank)

3. 一个特性字符串

4. 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

弹出窗口：如果第二个参数并不是一个已经存在的窗口或框架，那么会根据第三个参数传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数就会打开一个带有全部设置（工具栏，地址栏，状态栏等）的新浏览器窗口。第三个参数是一个逗号分割的设置字符串，表示在新窗口中都显示哪些特性。

window.open("http://www.wrox.com","worxWindow","height=400,width=400,top=10,left=10,resizable=yes");

弹出窗口可以使用window.close()来关闭自己。新创建的window对象有一个opener属性，其中保存着打开他的原始窗口对象。不过只在弹出窗口中的最外层window对象有定义。

间歇调用和超时调用

setTimeout():接收两个参数，要执行的代码（可以是字符串也可以是一个函数）和以毫秒表示的时间。javascript是一个单线程的解释器，因此一段时间内只能执行一段代码。为了控制要执行的代码，就有一个javascript任务队列。这些任务会按照他们添加到队列的顺序执行。setTimeout的第二个参数告诉javascript再过多长时间把当前任务添加到队列中。

setTimeout方法会返回一个超时id，是计划执行代码的唯一标识符。可以通过他来取消超时调用。可以把这个id传给clearTimeout()方法来取消未执行的超时调用计划。

var timeoutId = setTimeout(function(){
alert("Hello wolrd");
},1000);
clearTimeout(timeoutId);

setInterval():接收两个参数，要执行的代码和每次执行之前需要等待的毫秒数。

该方法同样返回一个间歇调用id。可以传入clearInterval()方法来取消间歇调用。

系统对话框

浏览器通过alert(),confirm(),prompt()方法可以调用系统对话框向用户显示信息。显示这些对话框的时候这些代码会停止执行。关掉之后又会恢复执行。

confirm单击了ok会返回true，单击cancel会返回false.

prompt()单击了ok会返回输入域的值。单击cancel或以其他方式关闭对话框则返回null.

var result = prompt("what is your name",""){
if(result != null){
alert("welcome"+result);
}
}

还有两个异步显示对话框。与用户通过浏览器菜单的“查找”，“打印”命令打开的对话框相同。

window.print();
window.find();

location对象

location对象既是window对象的属性，也是document对象的属性。location的属性如下：



创建一个函数解析查询字符串：

function getQueryStringArgs(){
var qs = (location.search.length>0?location.search.substring(1):""),
args = {},
items = qs.length?qs.split("&"):[],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
for(i=0;i<len;i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}

location.assign(url):改变浏览器的位置。如果将location.href或window.location设置为一个URL值也会调用assign（）方法。

通过这种方式修改url，浏览器会生成一条新纪录，因此用户可以单击“后退”按钮导航到前一个页面。要禁用这种行为而已使用replace方法。他不会生成一条新的历史记录。

location.replace("http://www.wrox.com");

reload方法：重新加载页面

location.reload();//可能从缓存中加载
location.reload(true)://从服务器重新加载

history.go(-1);//后退一页
history.back();
history.go(1);
history.forward();//前进一页