javascript高级程序设计读书笔记-第八章-BOM-window对象

一全局作用域

全局变量会成为window对象的属性

定义全局变量与在window对象上直接定义属性还是有一点区别：全局变量不能通过delete删除，而直接在window对象上的定义的属性可以

var age = 29；
window.color = "red";

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

alert(window.age)  //29
alert(window.red)  undefined

使用var语句添加的window属性有一个名为[[configurable]]的特性，这个特性设置为false，因此这样定义的属性不可以通过delete操作符删除

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

//抛出错误，因为oldValue未定义
var newValue = oldValue；

//这里不会抛出错误，这是一次属性的查询
var newVlaue = window.oldValue;

二窗口关系及框架

如果页面上包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中，可以通过数值索引或者框架名称来访问相应的window对象。每个对象都有一个name属性。最好通过top对象而非window来引用这些框架。例如top.frames[0]，top.frames["topFrame"]

top对象始终指向最高（最外）层的框架，与top相对的另一个window对象是parent，parent对象始终指向当前框架的直接上层框架。在某些情况下，parent可能等于top，但在没有框架的情况下，parent一定等于top（此时他们都等于window）

所有这些对象都是window对象的属性，可以通过window.top，window.parent等形式来访问，也可以这样window.parent.parent.frames[0]

三窗口位置

窗口相对于屏幕左边和上边的位置，在ie，safari，opera和chrome中是 screenLeft和screenTop ， firefox则是screenX和screenY，opera虽然支持screenX和screenY，但与screenLeft和screenTop并不对应。跨浏览器取得窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft:window.screenX

var topPos = ..........................................................................................................................................................

由于各个浏览器的特性，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值，然而，使用moveTo()和moveBy()倒是有可能将窗口移动到一个新的位置，这两个方法都接收两个参数，就像英文中的to和by的区别一样。。。一个是移动到哪里，一个是要移动多少，不过这两个方法在opera和ie7（以及更高版本）中默认就是禁用的，另外这两个方法不适合框架，只能对最外层的window对象使用。

四窗口大小

ie9+ ，firefox，safari中，outerWidth和outerHeight返回浏览器窗口本身的大小（无论是从最外层的window对象还是从某个框架访问），在opera中，这两个属性的值表示页面视图容器的大小，而innerWidth和innerHeight则表示容器中页面视图区的大小。在chrome中，outerWidth，outerHeight与innerWidth，innerHeight返回相同的值，即视口大小而非浏览器窗口大小。ie8及更早版本没有提供取到当前浏览器窗口尺寸的属性，不过，它通过DOM提供页面可见区域的相关信息

在ie，firefox，safari，opera和chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了视口的信息，在IE6中，这些属性必须在标准模式下才有效，如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息，而对于混杂模式下的chrome，则无论通过document.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小

resizeTo()方法接收浏览器窗口的新宽度和新高度，resizeBy()方法接收新窗口和原窗口的宽度和高度之差

五导航和打开窗口

window.open()方法既可以导航到一个特定的url，也有可以打开一个新的浏览器窗口。这个方法可以接收4个参数：要加载的URL，窗口目标，一个特性字符串以及一个表示新的页面是否取代浏览器历史记录中当前加载页面的布尔值，通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用

var newWin = window.open("http://www.baidu.com",target="topFrame","height=400,width=400,top=10,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no")

newWin.resizeTo(500,500);
newWin.moveTo(100,100);
newWin.close();
newWin.closed //true
newWin.opener = window  //true       opener属性指向打开它的原始窗口

第二个参数的值可以是已有窗口或者框架的名称，如果不存在，则会创建一个新窗口并命名为设置的值，此外，还可以传一些特殊的窗口名 _self,_parent,_top,_blank

有些浏览器（如ie和chrome）会在独立的进程中运行每个标签页，当一个标签页打开另一个标签页时，如果两个window对象之间需要彼此通信，那么两个标签页就不能运行在独立的进程中，在chrome中，将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页

检测浏览器是否屏蔽了弹出窗口

var blocked = false;
try{
    var newWin = window.open("http://www.baidu.com","_blank");
    if(newWin == null){
    blocked = true;
    }
}catch(ex){
    blocked = true;
}
if(blocked){
alert("The popup was blocked!");}

六间歇调用和超时调用

javascript是单线程语言。

var timeoutId = setTimeout(function(){alert("hello")},1000); //1000s之后把当前任务添加到队列中
clearTimeout(timeoutId)

var intervalId = setInterval(function(){alert("hello js")},1000);
clearInterval(intervalId)

建议使用超时调用替代间歇调用，因为后一个间歇调用可能会在前一个间歇调用结束之前启动，如果使用超时调用模拟间歇调用的效果，则完全可以避免这一点

七系统对话框

alert() confirm() prompt() 这几个方法打开的对话框都是同步和模态的

alert()用于生成警告，用户只能在看完消息之后关闭对话框

confirm()生成一个用户可以点击ok或者cancel的对话框，点击ok,confirm()方法会返回一个true，点击false或者右上角的 x，confirm()方法会返回false

prompt()生成一个提示框，用于提示用户输入一些文本，prompt方法接收两个参数，第一个是显示给用户的文本提示和文本输入域的默认值（可以是一个空字符串），prompt的返回结果就是文本输入域的内容，如果用户单击了cancel或者通过其他方式关闭对话框，则返回null