iframe子页面与父页面通信

最新推荐文章于 2025-09-07 22:29:54 发布

weixin_30535565

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kuangliu/p/4415274.html

本文详细介绍了在同域下父子页面通过iframe进行通信的方法，包括调用方法和访问DOM元素，并强调了确保iframe加载完成的重要性。同时提供了判断iframe加载状态的两种方法。

同域下父子页面的通信

父页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">
        function say(){
            alert("调用父页面方法成功");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
            console.dir(myFrame);
        }
    </script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

子页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">
        function say(){
            alert("调用子页面方法成功");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
            console.dir(parent.window);
        }
    </script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>