窗口间通信postMessage

窗口间的通信用的地方还是挺多的,比如弹出qq登录认证窗。先上兼容性


兼容性

基本用法其实也比较简单。
window.open方法会返回一个窗口对象,使用这个对象可以向子窗口发送消息,而子窗口可以通过window.opener向父窗口发送消息,先新建两个html
index.html(只展示body,其他地方省略了)

<body>
    <button onclick="opwin()">打开</button>
    <script type="text/javascript">
    function opwin() {
        //保留窗口对象
        var popup = window.open("test.html", "_blank");
    }
    function receiveMessage(event) {
        //event.origin是指发送的消息源,一定要进行验证!!!
        if (event.origin !== "http://localhost")return;
        //event.data是发送过来的消息。
        console.log(event.data);
        //event.source是指子窗口,主动向子窗口发送消息可以用popup
        //postMessage有两个参数,消息和自己的源(例如http://www.baidu.com),自己的源应该和目标源相同。否则发送会失败。
        event.source.postMessage("我是主窗口,我接收到消息了",window.location);
    }
    //添加消息接收函数
    window.addEventListener("message", receiveMessage, false);
    </script>
</body>

test.html

<body>
    <button onclick="send()">发送</button>
    <script type="text/javascript">
    function send() {
        //window.opener指的就是父窗口(打开本窗口的窗口)
        window.opener.postMessage("我是子窗口,向主窗口发送消息", window.location);
    }
    function receiveMessage(event) {
        if (event.origin !== "http://localhost")return;
        console.log(event.data);
    }
    window.addEventListener("message", receiveMessage, false);
    </script>
</body>

由于postMessage是通过网络协议,所以不能以直接在浏览器打开html的方式进行调试。而是应该放在服务器上,走网络协议
比如,这样是不对的


错误

这样才行

正确
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 作者:阮一峰 日期:2016年4月 8日 浏览器安全的基石是"同源政策"(same-origin policy)。...
    起名字太累阅读 3,858评论 0 1
  • 实时消息协议---流的分块 版权声明: 版权(c)2009 Adobe系统有限公司。全权所有。 摘要: 本备忘录描...
    一个人zy阅读 6,012评论 0 9
  • (关于跨域通信问题,先要将服务器配置好,添加两个不同域名,方便操作) 一、跨文档消息通信(同域名) iframe ...
    EndEvent阅读 3,008评论 0 1
  • 什么是同源策略 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能...
    ezrealor阅读 3,427评论 0 1
  • 伤害我别以爱之名, 否则我会判你无期徒刑。 不用担心我会有所行动, 我只是在心里对你默默地执行。 因为已经不需要去...
    琢玉书生阅读 1,319评论 0 1

友情链接更多精彩内容