BOM中的那点事-window(三)

<5>. 导航和新窗口

      通过使用window.open函数可以导航到一个特定的URL也可以打开一个新的浏览器窗口。open函数接受四个参数，声明如下：

open(url, target, features, replace)

url：将要打开的新地址
target：目标窗体，可以是窗口或者框架的名称也可以是以下的值：_self, _parent, _top, _blank
features：目标窗口的特性，是一个逗号分隔的名值对字符串，有如下值可以选择：

设    置	值	描述
fullscreen	yes/no	表示新开窗口是否最大化(仅限IE)
height	number	新浏览器窗口的高度，不能小于100
left	number	新浏览器窗口左坐标，不能为负值
location	yes/no	新浏览器窗口是否显示地址栏，默认值取决于浏览器实现
menubar	yes/no	新浏览器窗口是否显示菜单，默认为no
resizable	yes/no	新浏览器窗口是否能改变大小，默认为no
scrollbars	yes/no	新浏览器窗口是否出现滚动条，默认为no
status	yes/no	新浏览器窗口是否显示状态栏，默认为no
toolbar	yes/no	新浏览器窗口是否显示工具栏，默认为no
top	number	新浏览器窗口上方坐标，不能为负值
width	number	新浏览器窗口的宽度，不能小于100

比如可以像这样传递：window.open("http://www.google.com", "_blank", "height=200,width=200,toolbar=yes") 

replace：新打开的页面是否取代浏览器记录，通常在不打开新窗口时使用

open函数返回一个指向新窗口的引用，我们可以通过该引用对窗口进行更多的控制，如下示例：

//打开新窗口
var w = window.open("http://www.google.com", "_blank");
//调整位置和大小
w.moveTo(500, 500);
w.resizeBy(200, 200);
//关闭新窗口
w.close();

在以上的代码示例中需要注意一点，当w调用close关闭后w的引用任然存在，但是这时除了检查w是否关闭(w.closed == true)外没有其他的作用了。每个新创建的window对象都有一个opener属性，指向打开该新窗体的窗体，如下代码示例：

//打开新窗口
var w = window.open("http://www.google.com", "_blank");
//关闭原始窗口
w.opener.close();

以上代码首先打开一个新窗口，然后再关闭当前窗口。由于有些浏览器或者浏览器插件有屏蔽弹出窗体的功能，因此可以通过判断打开窗体是否为null来确定打开的窗体是否被屏蔽：

//打开新窗口
var w = window.open("http://www.google.com", "_blank");
//判断新窗口是否被屏蔽
if（w == null){
    alert("new window has benn blocked.");
}

<6>. 延迟调用和间隙调用

      JavaScript是单线程语言，但是允许通过设定超时和间隔时间来调度代码执行。window中包含两个函数可用于这一目的。首先setTimeout函数用于指定间隔多久后调用指定的代码；其次setInterval可以指定间隔特定时间循环执行指定的代码。setTimeout和setInterval函数声明如下：

setTimeout(expression, msec)
setInterval(expression, msec)

expression：将被执行的代码块，可以是一个包含JavaScript代码的字符串，也可以是一个函数对象，建议使用函数对象，因为使用代码字符串需要进行两次解析，有性能损失。
msec：间隔的时间，单位为毫秒

这两个函数都会返回一个表示超时调用或者间隙调用的数值ID拥有该ID就可以轻易地取消前面的超时或间隙设定。如下代码示例：

//2秒钟后显示timeout
var timeOut = window.setTimeout(function () {
    alert("timeout");
},
2000);
//取消超时调用
window.clearTimeout(timeOut);

//设置每隔2秒显示一次interval
var interval = window.setInterval(function () {
    alert("interval");
}, 
2000);
//取消间隙调用设定
window.clearInterval(interval);

上面的示例中首先为一个函数设置了2秒的超时调用，也就是在两秒后调用指定的函数，之后第7航代码取消超时设定，但是需要注意的是clearTimeout必须在设定的超时时间没有过去之前调用才有作用。第10行代码为函数设定了2秒的间隔调用时间，也就是每隔2秒钟会调用显示interval，这个函数同样也有问题，如果指定的函数执行比较耗时，超过了设定的间隙时间，那么就会出现后一个间隙调用在前一个间隙调用完成前启动，为了解决这个问题可以通过超时调用来模拟间隙调用，通常在实际工程中使用超时调用模拟间隙调用是最佳实践，如下代码：

//使用setTimeout模拟间隙调用
function setIntervalEx(expression, msec, count) {
    var num = 0;            
    (function intervalFunction() {
        num++;
        window.setTimeout(expression, msec);
        if (num < count) {
            window.setTimeout(intervalFunction, msec);
        }
    })();
};

//间隙调用
setIntervalEx(function () {
    alert("test");
}, 
1000, 
8);

<7>. 系统对话框

      系统有三种对话框alert，confirm，prompt。alert就是普通的消息对话框，只包含一个OK按钮，一般用于向用户显示不能控制的信息，如下图：

confirm为确认对话框，有ok和cancel两个按钮，如果点击ok，confirm返回true，否则返回false，一般用于询问确认类型的消息，如下图：

可以判断用户的选择进行后续操作：

if (confirm("Are you want to exit?")) {
    //do something
} else {
    //do something else
}

最后一个对话框为prompt，这种对话框可以让用户进行输入，然后获得用户的输入，如下图和代码：

var name = prompt("please enter your name:");
alert(name);

到此window对象介绍完了，如果有其他值得注意的问题或者文章中有什么错误欢迎批评指正。