javascript中父子页面跨iframe通讯

parent javascript:

代码如下

复制代码

// parent
// 访问方法
window.frames["childFrame"].callChild();

// 访问元素
var child = document.getElementById("childFrame").contentWindow.document;
child.getElementById('div').innerHTML = "我从父页面过来的！";
child javascript:

// child
// 访问方法
parent.callParent();

// 访问元素
parent.document.getElementById('div').innerHTML = "我是从子iframe过来的！";
PS: chrome下父子iframe不能再本地通讯

例子

代码如下

复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>父页面</title>
    </head>
    <body>
        <iframe name="childFrame" id="childFrame" src="child.html"></iframe>
        <input type="button" id="btn" value="Call Child" />
        <div id="div"></div>
        <script>
            document.getElementById('btn').onclick = function () {

// 访问方法
window.frames["childFrame"].callChild();

                // 访问元素
                var child = document.getElementById("childFrame").contentWindow.document;
                child.getElementById('div').innerHTML = "我从父页面过来的！";
            }
            function callParent () {
                alert("hello！我是父Page！")
            }
        </script>
    </body>
</html>

child.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>child</title>
    </head>
    <body>
        <input type="button" id="btn" value="Call Parent" />
        <div id="div"></div>
        <script>
            function callChild() {
                alert("hello！我是子iframe！");
            }
            document.getElementById('btn').onclick = function () {

// 访问方法
parent.callParent();

                // 访问元素
                parent.document.getElementById('div').innerHTML = "我是从子iframe过来的！";
            }
        </script>
    </body>
</html>

时间： 2024-09-20 15:02:32

javascript中父子页面跨iframe通讯

javascript中父子页面跨iframe通讯的相关文章

JavaScript中父子页面数据交互实例详解

java web-js中父子页面传参的问题

javascript中删除页面数据的问题

JAVASCRIPT中UTF8页面提交数据乱码怎么办

javascript中获取页面所有选择符的css规则实现代码

JavaScript中判断页面关闭、页面刷新的实现代码

JavaScript中判断页面关闭、页面刷新的实现代码_javascript技巧

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法_javascript技巧

javascript父子页面通讯实例详解_javascript技巧