js父頁面和子頁面相互取值

本文轉載自查看原文 2017-03-28 14:48 1828 JavaScript

iframe子頁面與父頁面通信根據iframe中src屬性是同域鏈接還是跨域鏈接，通信方式也不同。

一、同域下父子頁面的通信

父頁面parent.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.html");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="調用結束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="調用child.html中的函數say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

子頁面child.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="調用結束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="調用parent.html中的say()函數" onclick="callParent()"/>
</body>
</html>

方法調用

父頁面調用子頁面方法：FrameName.window.childMethod();

子頁面調用父頁面方法：parent.window.parentMethod();

DOM元素訪問

獲取到頁面的window.document對象后，即可訪問DOM元素

注意事項

要確保在iframe加載完成后再進行操作，如果iframe還未加載完成就開始調用里面的方法或變量，會產生錯誤。判斷iframe是否加載完成有兩種方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"來判斷

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js之iframe子頁面與父頁面通信父頁面調用子頁面js的方法 JS中子頁面父頁面方法變量相互調用 iframe頁面父頁面與子頁面之間相互進行數據傳送及方法調用 iframe父頁面和子頁面獲取元素和js變量操作iframe父頁面、子頁面的元素和方法 js JS中iframe子頁面與父頁面之間通信 iframe子頁面與父頁面元素的訪問以及js變量的訪問 JS子頁面調用父頁面的方法在js中獲取父頁面以及子頁面對象的方法