多窗口操作
由于网页可以使用iframe
元素,嵌入其他网页,因此一个网页之中会形成多个窗口。如果子窗口之中又嵌入别的网页,就会形成多级窗口。
窗口的引用
各个窗口之中的脚本,可以引用其他窗口。浏览器提供了一些特殊变量,用来返回其他窗口。
top
:顶层窗口,即最上层的那个窗口parent
:父窗口self
:当前窗口,即自身
下面代码可以判断,当前窗口是否为顶层窗口。
if (window.top === window.self) {
// 当前窗口是顶层窗口
} else {
// 当前窗口是子窗口
}
下面的代码让父窗口的访问历史后退一次。
window.parent.history.back();
与这些变量对应,浏览器还提供一些特殊的窗口名,供window.open()
方法、<a>
标签、<form>
标签等引用。
_top
:顶层窗口_parent
:父窗口_blank
:新窗口
下面代码就表示在顶层窗口打开链接。
<a href="somepage.html" target="_top">Link</a>
iframe 元素
对于iframe
嵌入的窗口,document.getElementById
方法可以拿到该窗口的 DOM 节点,然后使用contentWindow
属性获得iframe
节点包含的window
对象。
var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;
上面代码中,frame.contentWindow
可以拿到子窗口的window
对象。然后,在满足同源限制的情况下,可以读取子窗口内部的属性。
// 获取子窗口的标题
frameWindow.title
<iframe>
元素的contentDocument
属性,可以拿到子窗口的document
对象。
var frame = document.getElementById('theFrame');
var frameDoc = frame.contentDocument;
// 等同于
var frameDoc = frame.contentWindow.document;
<iframe>
元素遵守同源政策,只有当父窗口与子窗口在同一个域时,两者之间才可以用脚本通信,否则只有使用window.postMessage
方法。
<iframe>
窗口内部,使用window.parent
引用父窗口。如果当前页面没有父窗口,则window.parent
属性返回自身。因此,可以通过window.parent
是否等于window.self
,判断当前窗口是否为iframe
窗口。
if (window.parent !== window.self) {
// 当前窗口是子窗口
}
<iframe>
窗口的window
对象,有一个frameElement
属性,返回<iframe>
在父窗口中的 DOM 节点。对于非嵌入的窗口,该属性等于null
。
var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;
f1Window.frameElement === f1Element // true
window.frameElement === null // true
window.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
对象。
// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true
另外,name
属性的值会自动成为子窗口的名称,可以用在window.open
方法的第二个参数,或者<a>
和<frame>
标签的target
属性。