第十二章：window对象

第十一章介绍了window对象及其客户端javascript所扮演的核心角色：它是客户端Javascript程序的全局对象。本章介绍window对象的属性和方法，这些属性定义了不同的API，但是只有一部分实际上和浏览器窗口相关。window对象是以窗口命名的。

1节展示如何使用setTimeout()和setInterval()来注册一个函数，并在指定的时间后调用它。

2节讲述如何使用location属性来获取当前显式文档的URL和载入新的文档

3节介绍history属性，并展示如何在历史记录中向前和向后移动

4节展示如何使用navigator获取浏览器的厂商和版本信息，如何使用screen属性来查询窗口的尺寸

5节展示如何使用alert()、PRompt()、confirm()来显示简单的文本对话框，以及如何使用showModalDialog()显示HTML对话框

6节讲解如何使用onerror处理方法，这个方法在未补货javascript异常发生时调用

7节讲述HTML元素的ID和name作为window对象的属性来使用

8是一个很长的节，讲解如何打开和关闭浏览器。以及如何编写在多个窗口和嵌套窗体中的javascript 代码

1.计时器

setTimeout()和setIterval()可以用来注册在指定的时间之后，单词或重复调用的函数。因为它们都是客户端javascript中的重要全局函数，所以定义为window对象方法，但作为通用函数，其实并不会对窗口做什么事情。

window对象的setTimeout()方法用来实现一个函数在指定的毫秒后运行。setTimeout返回一个值，这个值可以传给clearTimeout()用于取消这个函数的执行。

SetInterval()和setTimeout()一样，只不过这个函数会在指定的毫秒数的间隔里重复调用：

            setInterval(updataClock,60000);//，每隔60秒调用一次updataClock函数

和setTimeout()一样，setInterval()函数也返回一个值，这个值可以传递给clearInterval()，用于取消后续函数的调用。

下面的例子定义的函数会在指定的时间之后，开始重复调用某个函数，然后在过了一段时间后取消函数的调用。该例子演示了setTimeout、setInterval、clearInterval的用法

            /**定时器应用函数             * 安排函数f()在未来的调用模式             * 在等待了若干时间后调用f()             * 如果设置了interval并没有设置end参数，则f()的调用不会停止             * 只有制定了f(),才会从start=0时刻开始             * 注意，调用invoke()不会阻塞，会立即返回             * */            function invoke(f, start, interval, end) {                if (!start) start = 0;//默认设置为0                if(arguments.length <=2)//单次调用模式                setTimeout(f,start);//start秒后调用f                else{                    setTimeout(repeat,start);//若干秒后调用f()                    function repeat(){                        var h = setInterval(f,interval);//循环调用f()                        //在end结束后调用，嵌套是end已经定义了                        if(end) setTimeout(function(){clearInterval(h);},end);                    }                }            }

一个简单的定时器函数

            var Obj = function(msg) {                this.msg = msg;                this.shout = function() {                    alert(this.msg);                }                this.waitAndShout = function() {                    var owner = this;                    setTimeout(function() {                        owner.shout.call(owner);                    }, 2000);                }            }            var aa = new Obj("abc");            aa.waitAndShout();

由于历史原因，setTimeout()和setInterval()第一个参数可以作为字符串传入。如果这么做，那这个字符串会在指定的超时时间或间隔之后求值(相当于执行eval()).除了前两个参数之外，HTML5规范还允许setTimeout()和setInterval()传入额外的参数，并且在调用函数的时候把这些参数传过去。

如果以0毫秒时间调用setTimeout，那么指定的函数不会立刻执行。相反会把它放到队里中，等到前面处于等待状态的事件处理程序完全完成之后，再立刻调用它。

2.浏览器的定位和导航

window对象的location属性引用的是Location对象，它表示该窗口中当前文档的URL，并定义了方法使创口引用到Location对象。

            window.location === document.location; //=>true 总是返回true

Document对象也有一个URL属性，是文档首次载人后保存该文档的URL静态字符串。如果定位到文档中的片段标识符(如#table-of-contens)，Location对象会做响应更新，而document.url属性却不会改变。

i.解析url

window对象的location属性引用是Location对象，表示当前显示的的文档的URL。Location对象的href属性是一个字符串。Location对象的toString()方法返回href属性的值，因此会在隐式调用toString()情况下，使用location代替Location.href

            var d = location.href;            var c = location.toString();            console.log(d === c)

这个对象的其它属性，protocol，host，hostname，port，pathname和search分别表示URL的各个部分。它们称为"URL分解"，同时被Link对象(通过HTML文档中的a和<area>元素创建)支持，参阅本书的第四部分，Location和Link项获取详细信息。

Location对象的hash和seerch比较有意思。hash表示URL中的“片段标识符 #xx”部分，search返回问好之后的URL,这部分一般是某种类型的查询字符串。

下面的例子展示了一个通用函数urlArgs()定义，可以用这个函数将参数从URL的search属性中提取出来。该例子用到了decodeURIComponent()，后者是在客户端Javascript定义的全局函数（参加本书第三章部分中的Global获取详细内容）。

            /**             *这个函数来解析来自URL的查询中串中的name=value参数             * 它将name=value对象存储在一个对象的属性中，并返回该对象，这样使用它             *             * var args = urlArgs();//从URL中解析参数             * var q = args.q ||"";//如果参数定义的话就使用它，否则使用默认值。             * var n = args.n?parseInt(args.n):10             **/            function urlArgs() {                var args = {}; //空对象                var query = location.search.substring(1); //？后的值                var pairs = query.split("&");                for (var i = 0; i < pairs.length; i++) { //对于每个片段                    var pos = pairs[i].indexOf('=');                    if (pos == -1) continue; //如果没有找到的话，跳过                    var name = pairs[i].substring(0, pos); //提取name                    var value = pairs[i].substring(pos + 1); //提取value                    value = decodeURIComponent(value); //对value进行解码                    args[name] = value;                }                return args;            }

ii.载入新的文档

Location对象的assign()方法可以使窗口载入并显示你指定的url文档。replace()方法也类似，但它在载入新的文档之前会从浏览历史把当前文档删除。如果脚本无条件的载入一个新的文档，replace()方法是可能比assgin()方法更好的选择。否则，后退 按钮会使用浏览器带回原始文档。而相同的脚本则会再次载入新文档。如果检测到用户浏览器不支持某些特性来显示功能齐全的版本，可以这样做：

             //如果浏览器不支持xmlHttpRequest对象             //则将其重定向到一个不需要Ajax的静态页面            if (xmlhttpRequest) location.replace("aa.html");

除了assign()和replace()方法，Location对象还定义了reload()方法，后者可以让浏览器重新载入当前文档。

传统的方法一般是这样做

            location = "http://a.com";            location = "page.html";

纯粹的片段标识符也是url的一种类型，可以这样定义

            location = "http://a.com#cll";            location = "page.html#top";

Location对象的URL是可写的，对它们重新赋值会改变URL的位置，导致浏览器载入新的文档（如果是hash属性，则定位到片段标识符）

        location.search = "?page=" + (pagename+1);//载入新的页面

3.浏览历史

window对象的history属性是引用该窗口的History对象。History对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。History对象的length属性表示浏览意思列表的数量元素，处于安全考虑，脚本不能访问已经保存的URL.

history对象的back()和forward()方法与浏览器的“后退”和“前进”按钮一样。它们可以往前后跳转一格，第三个方法go()，接受一个参数，可以像前(正参数)向后(幅参数)跳过任意个页面。

            history.go(-2); //向后两个历史记录，相当于后退按钮两次

如果窗口包含多个子窗口（比如iframe见本文8.ii节），子窗口的历史会按照穿插主窗口的历史中。

现代的web应用可以不通过载入新的文档而动态的改变自身内容。这么做希望用户能用“后退”和“前进”按钮在这些动态创建应用状态之间跳转。html5将这些技术标准(18章2节)。

在现实的工作中，那些需要以前的HTML5历史管理项目中，开发者会使用一些现成 解决方法（因为之前历史管理是个复杂的难题），很多框架都实现了这些功能。例如jQuery的history插件。也有一些单独的类库。RSH（Really Simple History）是其中一个比较流行的示例。（20章2节会有关于html5的历史管理）

4.浏览器和屏幕信息

本节介绍window对象的navigator和screen属性，它们分别引用的是Navigator和Screen对象，这些对象信息允许脚本根据环境定制的行为。

浏览器有一定的嗅探价值。这样的一种情况是，当需要解决某个浏览器特定的bug时，Navugator对象有4个属性提供关于运行中的浏览器的版本信息。并可以使用这些属性就行嗅探。

i.Nagvigator

appName

web浏览器的全称，IE中，它显示“Microsoft Internet Exploer”.在Firefox中，该属性就是“Netscape”，在其它浏览器中也是（为了兼容现在的浏览器嗅探码）。

appVersion

此属性通常以数字开始，并跟随浏览器开发商和版本信息等详细字符串。字符串的前边通常是4.0或者5.0，表示它是第4还是第5代兼容的浏览器。appVersion没有标准格式。所有没有办法判断浏览器的类型

userAgent

浏览器在它的User-Agent HTTP头部发送的字符串。这个属性通常包含所有appVersion信息，并且常常包含其它细节。和appVersion一样，它也没有标准格式。由于这个属性包含绝大部分信息，因此，浏览器嗅探代码通常使用它。

platform

在其上运行的浏览器的操作系统（可能是硬件的字符串）。

下面的例子展示了使用正则表达式（来自jQuery）从navigator.userAgent抽取浏览器的版本和名称方法代码。

             /* 使用naVigator.userAgent来进行浏览器嗅探  */             //为客户端嗅探定义browser.name和browser.version，这里使用了jQuery1.41的代码             //name和number都是字符串，对浏览器的输出结果不一样，检测的结果如下             //'webkit':safari或Chrome，版本号是WebKit的版本号             //'Opera' Opear 版本号就是软件的把嫩好             //"mozilla" Firefox或者基于gecko内核的浏览器，版本号是Gecko的版本             //msie     IE+版本号            var browser = (function() {                        var s = navigator.userAgent.toLowerCase();                        var match = /(webkit)[ //]([/w.]+)/.exec(s) ||                            /(opera)(?:.*version)?[ //]([/w.]+)/.exec(s) ||                            /(msie)([/w.]+)/.exec(s) ||                            !/compatible/.test(s) && /(mozilla)( ? : .* ? rv : ([/w.] + )) ? /.exec(s)||[];                    return{name:match[1]||"",version:match[2]||"0"};            }());

另外一种

            var info = {};            info.browser = function() {                ua = navigator.userAgent.toLowerCase();                var rwebkit = /(webkit)[ //]([/w.]+)/;                var ropera = /(opera)(?:.*version)?[ //]([/w.]+)/;                var rmsie = /(msie) ([/w.]+)/;                var rmozilla = /(mozilla)(?:.*? rv:([/w.]+))?/;