Window对象

window对象是客户端JavaScript程序的全局对象,包含多数的属性和方法。

计时器

Window对象包含2个方法可以进行计时操作:

  • setTimeout()用来注册在指定的时间后单次调用的函数,返回一个值,这个值可以传递给clearTimeout()用于取消函数的执行。
  • setInterval()用来注册在指定时间后重复调用的函数,返回一个值,这个值可以传递给clearInterval()用于取消后续函数的调用。

如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立即执行。相反,会把指定函数放到队列中,等到前面处理等待状态的事件处理程序全部执行完成后,再调用它。

浏览器定位 location

window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL。
Document对象的Location属性也引用到Location对象:

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

解析URL

Location对象包含一些属性:protocol, host, hostname, port, pathname和search,分别表示URL的各个部分。hash属性返回URL中的"片段标识符"(#top)部分,search属性返回的是问号之后的URL,这部分通常是某种类型的查询字符串。
比如,提取URL的搜索字符串中的参数:

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);
        var value = pairs[i].substring(pos + 1);
        value = decodeURIComponent(value);
        args[name] = value;
    }
    
    return args;
}

载入新的文档

  • Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。
  • replace()方法也类似,但是它在载入新文档之前会从浏览器历史中把当前文档删除。所有如果检测到用户浏览器不支持某些特性来显示功能齐全的版本,可以用location.replace()来载入静态的HTML版本,防止"后退"按钮把浏览器带回到原始文档。
  • 可以直接给location进行赋值实现页面的跳转:
location = "http://www.example.com";    // location直接赋值实现跳转

如果将片段标识赋值给location,则不会让浏览器载入新文档,只会使它滚动到文档的某个位置。

location = "#top";  // 跳转到文档的顶部

同时,location的分解属性是可写的,对它们重新赋值也会改变URL的位置。

location.search = "?page=" + (pagenum + 1); // 载入下一个页面

浏览历史

Window对象的history属性引用的是该窗口的History对象,History对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。

  • History对象的length属性表示浏览历史列表中的元素数量,但出于安全考虑,脚本不能访问已保存的URL。
  • History对象的back()和forward()方法与浏览器的"后退"和"前进"按钮一样。
  • History对象还包含一个go()方法,可以在历史列表中向前或向后跳过任意多个页。
history.go(-2); // 后退2个历史记录,相当于单击"后退"按钮2次

注:如果窗口包含多个子窗口(比如<iframe>元素),子窗口的浏览历史会按时间顺序穿插在主窗口的历史中。这意味着主窗口调用history.back()可能会导致其中一个子窗口往回跳转到前一个显示的文档,但主窗口保持不变。

Navigator对象

Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。
以下4个属性用于提供关于运行中的浏览器的版本信息:

属性 含义
appName web浏览器的全称。在IE中为"Microsoft Internet Explorer",在Firefox中为"Netscape",为了兼容现存的浏览器嗅探代码,其他浏览器通常也取值为"Netscape"。
appVersion 此属性通常以数字开始,并跟着浏览器厂商和版本信息的详细字符串。appVersion字符串没有标准的格式,所以没有办法直接用它来判断浏览器的类型。
userAgent 浏览器在它的USER-AGENT HTTP头部中发送的字符串。这个属性通常包含appVersion中的所有信息,并且也可能包含其他的细节。和appVersion一样,它也没有标准格式。但由于这个属性包含绝大部分信息,因此浏览器嗅探代码通常用它来嗅探。
platform 在其上运行浏览器的操作系统(并且可能是硬件)的字符串。
onLine 表示浏览器当前是否连接网络。
geolocation 用于确定用户位置信息的接口。
javaEnabled() 一个非标准的方法,当浏览器可以运行java小程序时返回true。
cookieEnable() 非标准的方法,如果浏览器可以保存永久的cookie时,返回true。

比如,使用navigator.userAgent来进行浏览器嗅探:

// 
// "webkit":  Safari或Chrome
// "opera":   Opera
// "mozilla": FireFox或者其他基于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] || "" };
}());

Screen对象

Window对象的screen属性引用的是Screen对象,它提供有关窗口显示的大小和可用的颜色信息。

  • 属性width和height指定的是以像素为单位的窗口大小。
  • 属性availWidth和availHeight指定的是实际可用的显示大小,排除了像桌面任务栏占用的空间。
  • 属性colorDepth指定的是显示的BPP(bits-per-pixel)值。
    可以使用Screen对象来确定web应用是否运行在一个小屏幕的设备上(比如上网本),然后选择更小的字体和图片等。

对话框

Window对象提供了4个方法来向用户显示对话框,3个简单方法:alert()、confirm()、prompt()。1个复杂方法:showModalDialog()。

  • 方法ocnfirm()和prompt()都会产生阻塞,也就是说,在用户关掉对话框前,它们不会返回。
  • alert()方法也会产生阻塞,但并不总是这样。
  • showModalDialog()显示一个"模态对话框"(显示出来就可点选位于其下面的对话框),第1个参数指定对话框HTML内容的URL,第2个参数是一个任意值(数组和对象均可),这个值在对话框里的脚本可以通过window.dialogArguments属性的值访问。第3个参数是一个非标准的列表,包含name=value对,可以配置对话框的尺寸或其他属性。
var p = showModalDialog("multiprompt.html", 
                        ["Enter 3D point coordinates", "x", "y", "z"],
                        "dialogwidth:400; dialogheight:300; resizable:yes");

错误处理

Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它。
onerror处理程序是早期的JavaScript的遗物,那里语言核心不包含try/catch异常处理语句,现在很少使用它,使用try/catch即可。

作为Window对象属性的文档元素

  • 如果在HTML文档中用id属性来为元素命名,Window对象会赋予一个属性,它的名字是id属性的值,而它们的值指向表示文档元素的HTMLElement对象,可以通过GetElementById()来获取。但是,如果Window对象已经具有此名字的属性时,这就不会发生,比如,id是"history"、"location"等。
  • id元素在文档中必须是唯一的,但是name属性不一定唯一,如果HTML元素有多于一个相同的name属性(或者一个元素有name属性,而另一个元素有相同值的id属性),则该名称的隐式全局变量会引用一个类数组对象,这个类数组对象的元素是所有命名的元素。
  • 有name或id属性的<iframe>元素是个特殊的例子,为它们创建的变量不会引用表示自身的Element对象,而是引用表示<iframe>元素创建的嵌套窗体的window对象。

多窗口和窗体

如果浏览器窗口包含多个标签页,则每一个标签页都是独立的Window对象上下文,而且相互之间互不干扰。由<iframe>所创建的嵌套浏览上下文是用它自己的Window对象所表示。
和相互独立的标签页不同,嵌套的浏览上下文之间并不是相互独立的。在一个窗体中运行的JavaScript程序总是可以看到它的祖先和子孙窗体,尽管脚本查看这些窗体的文档受到同源策略的限制。

打开窗口

使用Window对象的open()方法可以打开一个新的浏览器窗口(或标签页,这通常和浏览器配置有关)。

  • open()的第一个参数是要在新窗口中显示的文档URL。
  • open()的第二个参数是新打开的窗口的名字。如果指定的是一个已经存在的窗口的名字,则会直接使用已存在的窗口。如果省略此参数,会使用指定的名字"_blank"打开一个新的、未命名的窗口。
  • open()的第三个参数是可选的,一个以逗号分隔的列表,包含大小和各种属性,此参数是非标准的,HTML5规范也主张浏览器应该忽略它。
  • open()的第四个参数只在第二个参数命名是一个存在的窗口时才有用。它是一个布尔值,声明了由第一个参数指定的URL是否应该替换掉窗口浏览历史的当前条目(true),默认是不替换。
  • open()的返回值是新创建窗口的Window对象。
var w = window.open("smallwin.html", "smallwin",
                    "width=400, height=350, status=yes, resizable=yes");
  • 在新创建的窗口中,opener属性引用的是打开它的脚本的Window对象。
w.open.opener === w;    // true,对于任意窗口w

关闭窗口

就像方法open()打开一个新窗口一样,方法close()将关闭一个窗口。

  • 在表示窗体而不是窗口或标签页上的Window对象上执行close()方法不能关闭一个窗体,相反,只能从包含它的文档中删除iframe
  • 即使用一个窗口关闭了,代表它的Window对象仍然存在。但是它的closed属性为true、它的document会是null、它的方法通常也不会再工作。

窗体之间的关系

  • 任何窗口和窗体都可以引用为window或self。
  • 窗体可以用parent属性引用包含它的窗口或窗体的Window对象。如果一个窗口是顶级窗口或标签,而不是窗体,那么其parent属性引用是这个窗口本身。
  • 无论窗体被嵌套了几层,它的top属性引用的都是包含它的顶级窗口。
  • <iframe>元素有contentWidow属性,引用该窗体的Window对象,同样,可以进行反向操作--从表示窗体的Window对象来获取该窗体的<iframe>元素,使用Window对象的frameElement属性。窗体中的Window对象的frameElement属性不是null,但顶级窗口的Window对象的frameElement属性是null
  • 每个Window对象都有一个frames属性,它引用自身包含的窗口或窗体,frames属性引用的是类数组对象,frames[0]引用窗口的第一个子窗体,依次类推。

交互窗口中的JavaScript

每个窗口和窗体都有它自身的执行上下文,以Window作为全局对象。

  • 当用构造函数定义一个类,这个类只在一个单独的窗口定义。如果要在另一个窗口中使用,则需要显式的引用。
  • 和用户定义的类不同,内置的类(String,Date,RegExp...)都会在所有的窗口中自动预定义。但要注意,每个窗口都有构造函数的一个独立副本和构造函数对应原型对象的一个独立副本。这意味着instanceof操作符不能跨窗口使用。例如,当用instanceof来比较窗体B的一个字符串和窗体A的String()构造函数时,结果会是false。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容