window.parent、window.top、window.frames 與 window.frameElement

window.top、window.parent、window.self

window.top: 頂層窗口,即最上層的窗口;
window.parent: 父窗口,如果一個窗口沒有父窗口,則它的parent屬性為自身的引用;
window.self: 當前窗口,即自身的引用;

// 判斷當前窗口是否為頂層窗口
if (window.top === window.self) {  // 當前窗口為頂層窗口
}
// 判斷當前窗口是子窗口
if (window.parent !== window.self) {   // 當前窗口是子窗口
}

window.frames

  • frames屬性是一個類似數組的對象
    因為frames實際上是window對象的別名,frames屬性又是可以遍歷的,所以它是一個類似數組的對象
    window.frames.length === window.length
  • frames屬性實際上是window對象的別名
    window.frames === window
  • frames屬性的每一項是框架內的窗口,即框架內的window對象
    frames屬性的每一項并不是iframe的dom節點!!!
    若需要獲取iframe的dom節點可以通過以下方法:
    frames[0].frameElement

window.frameElement

  • frameElement 返回當前窗口所嵌入的對象元素

示例代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
  <script>
    function isTopWindow() {
        return (window.top === window.self);
    }
    
    function isChildWindow() {
        return (window.parent !== window.self);
    }
    
    function getFrameDomNode1() {
        return window.document.getElementById("iframe_id");
    }
    
    function getFrameDomNode2() {
        var subframes = getWindowFrames();
        return subframes[0].frameElement;
    }
    
    function getWindowFrames() {
        return window.frames;
    }
    
    function getInnerDom1() {
        var frameNode = getFrameDomNode1();
        return frameNode.contentWindow.document;
    }
    
    function getInnerDom2() {
        var frameNode = getFrameDomNode2();
        return frameNode.contentWindow.document;
    }
    
    function getInnerDom3() {
        var subframes = getWindowFrames();
        return subframes[0].document;
    }
    
    window.onload = function () {
        console.info("是否頂級窗口:" + isTopWindow());
        console.info("是否子窗口:" + isChildWindow());
        console.warn("關于frames屬性");
        console.info("window.frames === window: " + (window.frames === window));
        console.info("window.frames.length === window.length: " + (window.frames.length === window.length));
        console.warn("關于iframe dom節點");
        console.info("window.iframe_id === window.frames[0] === window.frames['iframe_id']: " + ((window.iframe_id === window.frames[0])    && (window.frames[0] === window.frames['iframe_id'])));
        console.info("兩個獲取iframe dom 節點結果是否一致:" + (getFrameDomNode1() === getFrameDomNode2()));
        console.info("三個個獲取內部 dom 結果是否一致:" + (getInnerDom1() === getInnerDom2()) && (getInnerDom2() === getInnerDom3()));
    }
  </script>
</head>
<body>
<iframe id="iframe_id" width="800" height="300"></iframe>
</body>
</html>

參考資料

  1. MDN web docs
  2. JavaScript 標準參考教程(alpha)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 概述 在瀏覽器中,window對象(注意,w為小寫)指當前的瀏覽器窗口。它也是所有對象的頂層對象。 “頂層對象”指...
    許先生__閱讀 1,687評論 0 6
  • window對象有以下方法: openclosealertconfirmpromptsetTimeoutclear...
    code武閱讀 698評論 0 1
  • 摘要:Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中,Window 對象是全局...
    曉小東_1920閱讀 339評論 0 2
  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,033評論 0 0
  • 第1章 小試牛刀 $ 是普通用戶,# 表示管理員用戶 root。 shebang:#!。sharp / hash ...
    巴喬書摘閱讀 6,375評論 1 4