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

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

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

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

    1. window.parent.history.back();

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

    • _top:顶层窗口
    • _blank:新窗口
    1. <a href="somepage.html" target="_top">Link</a>

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

    上面代码中,frame.contentWindow可以拿到子窗口的window对象。然后,在满足同源限制的情况下,可以读取子窗口内部的属性。

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

    <iframe>元素的contentDocument属性,可以拿到子窗口的对象。

    1. var frame = document.getElementById('theFrame');
    2. var frameDoc = frame.contentDocument;
    3. // 等同于

    <iframe>元素遵守同源政策,只有当父窗口与子窗口在同一个域时,两者之间才可以用脚本通信,否则只有使用window.postMessage方法。

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

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

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

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

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

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