iframe标签及父子页面传递数据

最新推荐文章于 2024-07-19 16:10:40 发布

想要成仙的菜鸟前端

最新推荐文章于 2024-07-19 16:10:40 发布

阅读量866

点赞数 1

分类专栏： javascript日常学习经验总结

本文链接：https://blog.csdn.net/qq_44441669/article/details/108578885

版权

javascript日常学习经验总结专栏收录该内容

34 篇文章 1 订阅

订阅专栏

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
frameborder:0/1(规定是否显示框架周围的边框。0:不显示，1：显示)

iframe 元素，父子之间数据传递：

1.子向父通信

parent.html

window.addEventListener('message',function(e){
        console.log(e.data);
        if(e.data.msg==='xxx'){
                //一些自己的业务逻辑
            }
});

child.html

window.parent.postMessage({
         msg:"xxx"
},'*');

2.父向子通信

parent.html

var myframe = document.getElementById('myframe');//获取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain);//childDomain是子页面的源（协议+主机+端口号）

child.html

window.addEventListener('message', function(e){
      console.log(e.data.data);
})

注意：
1.子向父，子postMessage,父监听message;
2.父向子，父postMessage,子监听message;
3.测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)

测试代码部分：

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe父级页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        iframe {
            width: 200px;
            height: 200px;
        }
    </style>

</head>
<body>
    <h2>我是父级页面</h2>
    <button id='btn'>父页面的按钮</button>
     <div id="default">div内容</div>
    <iframe src="http://localhost:8800/child.html" frameborder="0" name='myframe' id='myframe'></iframe>
    <script language="javascript" type="text/javascript">
         window.addEventListener('message',function(e){
            console.log(e.data);
            if(e.data.msg==='hideselfService'){
                document.getElementById('default').style.display = 'none';
            }
        });
         document.getElementById('btn').onclick= function(){
             var myframe = document.getElementById('myframe');
            myframe.contentWindow.postMessage({data:'parent'},'http://localhost:8800');
         }
    </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe子页面</title>
</head>
<body>
    <h2>我是内嵌的子页面</h2>
    <button id='btn'>子页面的按钮</button>
    <script>
         document.getElementById('btn').onclick= function(){
            window.parent.postMessage({
                msg:"hideselfService"
            },'*');
        }
        window.addEventListener('message', function(e){
            console.log(e.data.data);
        })
    </script>
</body>
</html>

tips:测试后的时候，我是分别用node起了两个服务，父页面在localhost:8000上，子页面在localhost:8800上

参考链接：
链接：https://www.jianshu.com/p/e558f4115c82

想要成仙的菜鸟前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
iframe标签及父子页面传递数据

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。frameborder:0/1(规定是否显示框架周围的边框。0:不显示，1：显示)iframe 元素，父子之间数据传递：1.子向父通信parent.htmlwindow.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑
复制链接

扫一扫

专栏目录