JS子頁面訪問父頁面元素/變量/函數

時間 2019-11-08

標籤頁面訪問元素變量函數欄目 JavaScript 简体版

原文原文鏈接

四個屬性變量javascript

window.self window.parent window.top window.framescss

在頁面中嵌入一個 iframe 頁面後子頁面中並不能直接訪問父頁面中的變量、函數或者文檔元素
html

一、使用 iframe 嵌入一個子頁面其實至關於在當前 BOM 掛載了一個子 BOMjava

二、父 BOM 會將子 BOM 存放於 window.frames 屬性中， frames 爲數組，其中的元素爲子 BOM 對象數組

三、BOM 對象即 window 對象，DOM 對象即 window.document函數

四、JS的做用於爲當前 BOM，即 window，js的隱藏指針全局 this 也是指向的 windowthis

index.html中使用iframe嵌人了main.htmlspa

main.html中使用iframe嵌入了sub.html指針

index.htmlcode

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body {
            height:100%;
        }
        * {
            margin: 10px 5px;
        }
    </style>
</head>
<body>
    <div style="border: 5px solid #00f">
        <p>this is index</p>
        <form name="user">
            <div><input type="text" name="username" value="sallency"></div>
            <div><input type="text" name="password" value="123456"></div>
        </form>
   
        <script type="text/javascript">
            var varIndex = 'index';
            function index() {
                return 'this is index function';
            }
            //訪問子頁面的子頁面的函數
            console.log("index父頁面訪問main頁面的sub頁面函數：" + window.frames['main'].frames['sub'].sub());
             //訪問子頁面的子頁面的函數
            console.log("index父頁面訪問main頁面的sub頁面DOM：" + window.frames['main'].frames['sub'].document.title);
        </script>
        <iframe src="main.html" name="main" width="500px" height="500px" style="border: 5px solid #f00">
        </iframe>
     </div>
</body>
</html>

main.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>main iframe</title>
    </head>
    <body>

        <div>
            <p id="main_passage">this is main iframe</p>
        </div>

        <script type="text/javascript">
            var varMain = "main";
            function main() {
                return 'this is main function';
            }
            //main訪問父頁面即index頁面的index函數
            console.log(window.parent.index());
            //main訪問父頁面即index頁面的標題
            console.log(window.parent.document.title);
            /main訪問子頁面即sub頁面的sub函數
            console.log(window.frames['sub'].sub());
            //main訪問子頁面即sub頁面的標題
            console.log(window.frames['sub'].document.title);
        </script>
        <iframe src="sub.html" name="sub" width="300px" height="300px;" style="border: 5px solid #0f0">
        </iframe>
        
    </body>
</html>

sub.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>
            sub iframe
        </title>
    </head>
    <body>
        <div>
            <p>this is sub iframe</p>
        </div>
        <script type="text/javascript">
            var varSub = "sub";
            function sub() {
                return 'this is sub function';
            }
            //注意 此window爲sub iframe的window對象

            //其parent爲main iframe 故不等頂層window
            console.log(window.parent == window.top);
            //main iframe的父級爲頂層window
            console.log(window.parent.parent == window.top);
            //判斷本身是否是頂層window
            console.log(window.self == window.top);

            //頂層window index的BOM(window)->DOM(document)->form->elements
            console.log('我是頂層window的DOM中的表單元素：' + window.top.document.forms['user'].elements['username'].name);
            //window.top.frames['main']即爲main iframe的window對象 能夠調用DOM和函數
            console.log(window.top.frames['main'].document.getElementById('main_passage').innerHTML);
            //能夠使用每一個window的frames數組去訪問其子頁面的BOM
            console.log('我是 main 函數:' + window.top.frames['main'].main() + '我是 main 變量:' + window.top.frames['main'].varMain);
            console.log('我是 main 函數:' + window.parent.main() + '我是 main 變量:' + window.parent.varMain);
            //父 window 訪問本身的子 window 對象 層層遞歸
            console.log(window.top.frames['main'].frames['sub'].document.title);
        </script>
    </body>
</html>

一、window.top 會返回最頂層的 BOM，能夠使用 window.self == window.top 來斷定本身是否是頂層 BOM

二、window.parent 會返回本身的父 BOM，能夠使用此對象訪問父頁面的變量方法和 document 對象

三、window.frames 存放着當前 BOM 的子 BOM 集合，能夠經過 window.frames['frameName']去獲取子 BOM，從而進一步操做子頁面的變量函數和 document

四、當咱們經過以上變量和方法成功切換到某window的上下文中後便可訪問此頁面的變量方法和 document 對象

以上即可以完成父子頁面的相互訪問