码迷,mamicode.com
首页 > 其他好文 > 详细

iframe子页面与父页面通信

时间:2015-04-10 19:28:55      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

同域下父子页面的通信

父页面:

<!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>

方法调用

父页面调用子页面方法:FrameName.window.childMethod();

子页面调用父页面方法:parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后,即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

iframe子页面与父页面通信

标签:

原文地址:http://www.cnblogs.com/kuangliu/p/4415274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!