JavaScript BOM——“window 对象”的注意要点

全局作用域

window 在是BOM 的核心对象，他是浏览器的一个实例。

在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。如：

var age = 18;
function sayAge(){
    console.log(window.age);
}

console.log(window.age); //18
sayAge(); //18
window.sayAge(); //18

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

var age = 29; // var 语句添加的 window 属性[[Configurable]] 为 false
window.color = "red";
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

另外，通过查询 window 对象，可以知道某个可能未声明的变量是否存在，如：

var newValue = oldValue; //oldValue is not defined

var newValue = window.oldValue; //这个算是查询，如果没有定义也不会报错

窗口关系及框架

`top`

每个框架都拥有自己的window 对象，并且保存在frames 集合中。每个 window 对象都有一个 name 属性，其中包含框架的名称。如：

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

以上代码创建了一个框架集，其中一个框架居上，两个框架居下。可以通过window.frames[0] 或者 window.frames["topFrame"] 来引用上方的框架。不过，恐怕最好使用top 而非 window 来引用这些框架（例如，通过 top.frames[0] ）。

`parent`

与 top 相对的另一个 window 对象是 parent 。 parent （父）对象始终指向当前框架的直接上层框架。在没有框架的情况下， parent 一定等于top （此时它们都等于 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>

这个框架集中的一个框架包含了另一个框架集，该框架集的代码如下所示。

<frameset cols="50%,50%">
    <frame src="red.htm" name="redFrame">
    <frame src="blue.htm" name="blueFrame">
</frameset>

如果代码位于redFrame（或blueFrame）中，那么parent 对象指向的就是 rightFrame 。如果代码位于topFrame 中，则parent 指向的是top。

`self`

与框架有关的最后一个对象是 self ，它始终指向 window ；实际上， self 和 window 对象可以互
换使用。引入 self 对象的目的只是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。

窗口位置

`screenLeft`和`screenTop`

screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。Opera虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应，因此建议大家不要在 Opera 中使用它们。如：

<body>
    <input type="text" id="input">
    <script>
        var x = self.setInterval("getPos()",10);
        var input = document.getElementById("input");
        
        function getPos(){
            var leftPos;
            if(typeof window.screenLeft == "number"){ //首先确定screenLeft 和screenTop 属性是否存在，如果不存在（在 Firefox 中），则取得screenX 和screenY 的值。
                leftPos = window.screenLeft;
            }else{
                leftPos = screenX;
            }
            input.value = leftPos;
        }
    </script>
</body>

上面这个代码可以直接在input 中显示screenLeft 或screenX 的值。

由于各种原因，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

`moveTo`和`moveBy`

这两个方法都接收两个参数，其中moveTo() 接收的是新位置的 x 和 y 坐标值，而 moveBy() 接收的是在水平和垂直方向上移动的像素数。如：

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动 100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动 50 像素
window.moveBy(-50,0);

需要注意的是，这两个方法可能会被浏览器禁用，这两个方法都不适用于框架，只能对最外层的 window 对象使用。

窗口大小

`innerWidth`、`innerHeight`、`outerWidth`和`outerHeight`

在 IE9+、Safari和 Firefox中， outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸。
在Opera中， outerWidth 和 outerHeight 这两个属性的值表示页面视图容器的大小。
而innerWidth 和 innerHeight则表示该容器中页面视图区的大小。
在 Chrome 中， outerWidth 、 outerHeight 与innerWidth 、 innerHeight 返回相同的值，即视口（viewport）大小。
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 属性，都可以取得视口的大小。

所以无法准确确定窗口本身的大小，但可以取得准确的页面视口的大小：

其他浏览器可以通过innerWidth 和innerHeight 取得；
IE8 之前可以通过DOM 取得：
- 标准模式下通过document.documentElement.clientWidth 和document.documentElement.clientHeight 取得；
- 混杂模式下通过document.body.clientWidth 和document.body.clientHeight取得；

可以用以下代码获取innerWidth 和innerHeight（其中，document.compatMode用来判断当前浏览器采用的渲染方式。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。）：

var pageWidth = window.innerWidth,
    pageHeight = window.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;
    }
}

其他具体的有关移动设备视口的话题，推荐学习移动Web 开发。

`resizeTo`和`resizeBy`方法

这两个方法都接收两个参数，其中 resizeTo() 接收浏览器窗口的新宽度和新高度，而 resizeBy() 接收新窗口与原窗口的宽度和高度之差。如：

//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);

有可能被浏览器禁用。

导航和打开窗口

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

//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

意思是在名为'topFrame'的框架中打开URL。这个参数也可以是： _self 、 _parent 、 _top 或 _blank 。

弹出窗口

如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置的新浏览器窗口。第三个参数主要有：

fullscreen
yes 或 no 表示浏览器窗口是否最大化。仅限IE

height
数值  表示新窗口的高度。不能小于100

width
数值  表示新窗口的宽度。不能小于100

top
数值  表示新窗口的上坐标。不能是负值

left
数值  表示新窗口的左坐标。不能是负值

location
yes 或 no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）

menubar
yes 或 no 表示是否在浏览器窗口中显示菜单栏。默认值为 no

resizable
yes 或 no 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为 no

scrollbars
yes 或 no 表示如果内容在视口中显示不下，是否允许滚动。默认值为 no

status
yes 或 no 表示是否在浏览器窗口中显示状态栏。默认值为 no

toolbar
yes 或 no 表示是否在浏览器窗口中显示工具栏。默认值为 no

注意，整个特性字符串中不允许出现空格。

调整新窗口大小

有些浏览器不允许我们针对主浏览器窗口调整大小或移动位置。通过 window.open 返回的对象，可以像操作其他窗口一样操作新打开的窗口：

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.resizeTo(400,1000);

关闭新窗口

调用 close() 方法还可以关闭新打开的窗口。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.close(); //打开之后立刻关闭

当然也可以使用window.close()。

`opener`属性

opener 属性，其中保存着打开它的原始窗口对象。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

document.write(newWindow.opener == window); //true

将 opener 属性设置为 null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.opener = null;

弹出窗口屏蔽程序

两种情况：

浏览器内置的屏蔽程序阻止的弹出窗口，window.open() 返回null，只要检测这个值即可；
浏览器扩展或其他程序阻止的弹出窗口，window.open() 抛出错误，则需要把 window.open() 封装在一个 try-catch 块中；

对于第一种：

var popWin = window.open("http://www.baidu.com/","_blank");
if (popWin == null){
    console.log("the popup was blocked by explorer!")
}

如果 popWin 被浏览器内置的屏蔽程序阻止了，检测到 popWin 的值为 null；

对于第二种：

var blocked = false; //预设弹出窗口没有被屏蔽

//try-catch 代码块开始
try {
    var popWin = window.open("http://www.baidu.com/","_blank");
    if (popWin == null){
        blocked = true; //如果值为null，说明被浏览器内置屏蔽程序屏蔽
    }
} catch(ex){
    blocked = true; //如果收到错误，说明被浏览器屏蔽插件屏蔽
}
//try-catch 代码块结束

//如果被屏蔽，返回字符串提示
if (blocked){
    console.log("the popup was blocked!")
}

间歇调用和超时调用

JavaScript 是单线程语言。一个是在指定的时间后执行代码，另一个是每隔指定的时间就执行一次代码。

`setTimeout()`方法

接收两个参数，一个是要执行的代码，一个是以毫秒为单位的时间。如：

setTimeout("document.write('running!')", 1000);

setTimeout(function(){
    document.write("running it!")
}, 2000);

由于传递字符串会导致性能问题，因此不建议用字符串作为第一个参数。

另外，JavaScript 有一个任务列队，如果列队是空的，添加的代码会立即执行；如果列队不是空的，那么要等到前面的代码执行完了以后再执行。

`clearTimeout()`方法

调用setTimeout()方法后，该方法会返回一个调用 ID。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用。如：

var x = setTimeout(function(){
    document.write("running it!")
}, 3000);

setTimeout(function(){
    clearTimeout(x)
}, 2000); //因为在2秒钟的时候把 x 超时调用取消了，所以 3 秒后的超时调用则不会出现。

`setInterval()`方法（由于一些原因，最好不要使用间歇调用）

参数仍然是两个，一个是指定的执行代码，另一个是间歇时间。如：

setInterval("document.write('running!')", 1000);

setInterval(function(){
    document.write("running it!!!")
}, 1500);

同样的，调用该方法会返回一个间歇调用ID。使用clearInterval()停止：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

var x = setInterval(showList, 100);
function showList(){
    console.log(list[num]);
    num ++;
    if (num == list.length){
        clearInterval(x)
        console.log("done!")
    }
}

如上，以 100 毫秒的速度遍历所有 list 的值。

也可以使用超时调用来实现，如：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

setTimeout(showList, 100);

function showList(){
    console.log(list[num]);
    num ++;
    if (num < list.length){
        setTimeout(showList, 100);
    }else{
        console.log("done!");
    }
}

最好使用超时调用来模拟间歇调用。

系统对话框

`alert()`

一个字符串参数，并将其显示给用户。

`confirm()`

一个字符串参数，并将其显示给用户，提供两个按钮，一个 Ok 按钮返回布尔值 true；另一个按钮 Cancel 返回布尔值 false。

`prompt()`

一个“提示框”，接收连两个参数：要显示给用户的文本提示和文本输入域的默认值（可以为空字符串）。

如：

var str = prompt("insert your name here", "");
if (str.length > 0){
    alert("welcome " + str);
    var result = confirm("would you want something to drink ?");
    if (result){
        document.write("please wait");
    }else{
        document.write("have a seat");
    }
}else {
    alert("can not define");
}

JavaScript BOM——“window 对象”的注意要点

全局作用域

窗口关系及框架

`top`

`parent`

`self`

窗口位置

`screenLeft`和`screenTop`

`moveTo`和`moveBy`

窗口大小

`innerWidth`、`innerHeight`、`outerWidth`和`outerHeight`

`resizeTo`和`resizeBy`方法

导航和打开窗口

弹出窗口

调整新窗口大小

关闭新窗口

`opener`属性

弹出窗口屏蔽程序

间歇调用和超时调用

`setTimeout()`方法

`clearTimeout()`方法

`setInterval()`方法（由于一些原因，最好不要使用间歇调用）

系统对话框

`alert()`

`confirm()`

`prompt()`

JS菌

引用和评论

一个例子了解什么是桥接模式

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

JavaScript BOM——“window 对象”的注意要点

全局作用域

窗口关系及框架

top

parent

self

窗口位置

screenLeft和screenTop

moveTo和moveBy

窗口大小

innerWidth、innerHeight、outerWidth和outerHeight

resizeTo和resizeBy方法

导航和打开窗口

弹出窗口

调整新窗口大小

关闭新窗口

opener属性

弹出窗口屏蔽程序

间歇调用和超时调用

setTimeout()方法

clearTimeout()方法

setInterval()方法 （由于一些原因，最好不要使用间歇调用）

系统对话框

alert()

confirm()

prompt()

JS菌

引用和评论

一个例子了解什么是桥接模式

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

`top`

`parent`

`self`

`screenLeft`和`screenTop`

`moveTo`和`moveBy`

`innerWidth`、`innerHeight`、`outerWidth`和`outerHeight`

`resizeTo`和`resizeBy`方法

`opener`属性

`setTimeout()`方法

`clearTimeout()`方法

`setInterval()`方法（由于一些原因，最好不要使用间歇调用）

`alert()`

`confirm()`

`prompt()`