使用postMessage来实现父子通信跨域

2020-11-12 14:01:46

参考地址 postMessage父子跨域通信

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');//获取iframemyframe.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上



  • 2018-09-05 01:42:03

    git reset 回退以前某个版本及常用命令

    第一个命令只删除所有untracked的文件,如果文件已经被tracked, 修改过的文件不会被回退。而第二个命令把tracked的文件revert到前一个版本,对于untracked的文件(比如编译的临时文件)都不会被删除。

  • 2018-09-08 16:04:25

    Android SQLiteDatabase使用详细教程

    Android提供了创建和是用SQLite数据库的API。SQLiteDatabase代表一个数据库对象,提供了操作数据库的一些方法。在Android的SDK目录下有sqlite3工具,我们可以利用它创建数据库、创建表和执行一些SQL语句。下面是SQLiteDatabase的常用方法。SQLiteDatabase的常用方法方法名称方法表示含义openOrCreateDatabase(Stringpath,SQLiteDatabase.CursorFactoryfactory)

  • 2018-09-09 02:25:09

    单例模式的好处和缺点?为什么要用单例模式?

    单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

  • 2018-09-09 02:31:48

    基于VCamera,仿微信录制短视频

    基于VCamera,Android仿微信录制短视频,如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request。