javascript的window对象

发表于 更新于
我最不喜欢等，因为这个期限永远都是个未知数。

1.概述

在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。
“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

1
2
var a = 1;
window.a // 1

上面代码中，变量a是一个全局变量，但是实质上它是window对象的属性。声明一个全局变量，就是为window对象的同名属性赋值。

2.window对象的属性

window.window，window.name

window对象的window属性指向自身。

1
window.window === this // true

window.name属性用于设置当前浏览器窗口的名字。

1
2
3
window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。
该属性只能保存字符串，且当浏览器窗口关闭后，所保存的值就会消失。因此局限性比较大，但是与<iframe>窗口通信时，非常有用。

window.location

window.location返回一个location对象，用于获取窗口当前的URL信息。它等同于document.location对象。

1
window.location === document.location // true

3.window对象的方法

window.open(), window.close()

window.open方法用于新建另一个浏览器窗口，并且返回该窗口对象。

1
var popup = window.open('somefile.html');

上面代码会让浏览器弹出一个新建窗口，网址是当前域名下的somefile.html。

open方法一共可以接受四个参数。

  • 第一个参数：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
  • 第二个参数：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则跳到该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。
  • 第三个参数：字符串，内容为逗号分隔的键值对，表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整UI的新窗口。
  • 第四个参数：布尔值，表示第一个参数指定的网址，是否应该替换history对象之中的当前网址记录，默认值为false。显然，这个参数只有在第二个参数指向已经存在的窗口时，才有意义。

window.getSelection()

window.getSelection方法返回一个Selection对象，表示用户现在选中的文本。

1
var selObj = window.getSelection();

使用Selction对象的toString方法可以得到选中的文本。

1
var selectedText = selObj.toString();

4.多窗口操作

窗口的引用

各个窗口之中的脚本，可以引用其他窗口。浏览器提供了一些特殊变量，用来返回其他窗口。

  • top：顶层窗口，即最上层的那个窗口
  • parent：父窗口
  • self：当前窗口，即自身

下面代码可以判断，当前窗口是否为顶层窗口。

1
2
3
4
top === self

// 更好的写法
window.top === window.self

下面的代码让父窗口的访问历史后退一次。

1
parent.history.back();

与这些变量对应，浏览器还提供一些特殊的窗口名，供open方法、<a>标签、<form>标签等引用。

  • _top：顶层窗口
  • _parent：父窗口
  • _blank：新窗口

下面代码就表示在顶层窗口打开链接。

1
<a href="somepage.html" target="_top">Link</a>

iframe标签

对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的DOM节点，然后使用contentWindow属性获得iframe节点包含的window对象，或者使用contentDocument属性获得包含的document对象。

1
2
3
4
5
6
7
8
9
10
11
var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

// 等同于 frame.contentWindow.document
var frameDoc = frame.contentDocument;

// 获取子窗口的变量和属性
frameWindow.function()

// 获取子窗口的标题
frameWindow.title

iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

iframe窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身。因此，可以通过window.parent是否等于window.self，判断当前窗口是否为iframe窗口。

1
2
3
if (window.parent !== window.self) {
  // 当前窗口是子窗口
}

iframe嵌入窗口的window对象，有一个frameElement属性，返回它在父窗口中的DOM节点。对于那么非嵌入的窗口，该属性等于null。

1
2
3
4
var f1Element = document.getElementById('f1');
var fiWindow = f1Element.contentWindow;
f1Window.frameElement === f1Element // true
window.frameElement === null // true

frames属性

window对象的frames属性返回一个类似数组的对象，成员是所有子窗口的window对象。可以使用这个属性，实现窗口之间的互相引用。比如，frames[0]返回第一个子窗口，frames[1].frames[2]返回第二个子窗口内部的第三个子窗口，parent.frames[1]返回父窗口的第二个子窗口。

需要注意的是，window.frames每个成员的值，是框架内的窗口（即框架的window对象），而不是iframe标签在父窗口的DOM节点。如果要获取每个框架内部的DOM树，需要使用window.frames[0].document的写法。

另外，如果iframe元素设置了name或id属性，那么属性值会自动成为全局变量，并且可以通过window.frames属性引用，返回子窗口的window对象。

1
2
3
// HTML代码为<iframe id="myFrame">
myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true

另外，name属性的值会自动成为子窗口的名称，可以用在window.open方法的第二个参数，或者<a>和<frame>标签的target属性。

事件

error 事件和 onerror 属性

浏览器脚本发生错误时，会触发window对象的error事件。我们可以通过window.onerror属性对该事件指定回调函数。

1
2
3
window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

由于历史原因，window的error事件的回调函数不接受错误对象作为参数，而是一共可以接受五个参数，它们的含义依次如下。

  • 出错信息
  • 出错脚本的网址
  • 行号
  • 列号
  • 错误对象

老式浏览器只支持前三个参数。

参考链接

http://javascript.ruanyifeng.com/bom/window.html
https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/