zoukankan      html  css  js  c++  java
  • H5 Notes:PostMessage Cross-Origin Communication

    Javascript中要实现跨域通信,主要有window.name,jsonp,document.domain,cors等方法。不过在H5中有一种新的方法postMessage可以安全实现跨域通信,并且使用简单。

    要使用postMessage,首先得检查浏览器是否支持该方法,postMessage属于window对象,检测方法如下:

    if('postMessage' in window){
        
    }else{
        console.log('浏览器不支持postMessage');
    }

    postMessage使用语法如下所示。

    otherWindow.postMessage(message, targetOrigin, [transfer]);
    
    otherWindow必须是一个window对象的引用,如iframe的contentWindow,window.open的返回对象,window.frames[index]等。
    
    targetOrigin指定otherWindow的源,如果目标窗口的协议,主机地址,端口只要一个不同,该方法便不会执行信息发送

    为了能接收到postMessage发送的消息,必须在window对象上监听message事件,该事件对象包涵了data(消息)、origin(来源地址)、source(来源窗口代理)等属性,使用如下所示

    window.onmessage = function(e){
        if (e.origin === 'http://www.test.zmx.com') {
            alert(e.data);
        }
    }

    下面是使用postMessage的小例子,帮助理解。

    http://www.test.zmx.com/postmessage.html,简称A页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <iframe frameborder="0" src="http://www.select.zmx.com/select.html"></iframe>
        <input type="text" id="kw"><button id="btn">发送到子窗口</button>
        <script type="text/javascript">
            
            window.onload = function(){
                window.onmessage = function(e) {
                    if (e.origin === 'http://www.select.zmx.com') {
                        alert("收到来自子窗口的消息:"+e.data);
                    }
                }
                btn.onclick = function(e) {
                    var val = kw.value;
                    window.frames[0].postMessage(val, 'http://www.select.zmx.com');
                }
            }
        </script>
    </body>
    </html>

    http://www.select.zmx.com/select.html,简称B页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单下拉框插件</title>
        <link rel="stylesheet" href="simpleSelect.css">
        <style type="text/css">
            body{ padding: 40px; }
        </style>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="simpleSelect.js"></script>
    </head>
    <body>
        <input type="text" id="in1"><button id="btn1">发送到父窗口</button>
        <script>
            window.onmessage = function(e){
                if (e.origin === 'http://www.test.zmx.com') {
                    alert("收到来自父窗口的消息:"+e.data);
                }
            }
            btn1.onclick = function(e) {
                var val = in1.value;
                window.top.postMessage(val, 'http://www.test.zmx.com');
            }
        </script>
    </body>
    </html>

    在A页面中发送消息hello world给B页面,如下所示。

    点击发送,则B页面则收到消息,如下所示。

    B页面向A页面发送消息也是一样的,就不叙述了。

  • 相关阅读:
    单例模式(singleton)
    Unsupported major.minor version 51.0
    “万能数据库查询分析器”4.03发布,谨以此致我们终将逝去的青春
    和菜鸟一起学linux内核之初始化init篇
    PL/SQL备份oracle数据库
    java.lang.ClassCastException: org.apache.struts.taglib.bean.CookieTei
    DB Query Analyzer 4.03 is upgraded in ZOL
    Android应用程序资源的查找过程分析
    java.lang.IllegalArgumentException: Can't convert argument: null
    Dalvik虚拟机简要介绍和学习计划
  • 原文地址:https://www.cnblogs.com/zmxmumu/p/6076613.html
Copyright © 2011-2022 走看看