zoukankan      html  css  js  c++  java
  • postMessage和onmessage的使用

    postMessage和onmessage是HTML5的方法,用来解决跨页面通信,或者通过iframe嵌套的不同页面的通信的。postMessage为发送方,onmessage为接收方。

      注:该方法需要浏览器对 HTML5 的支持 查看是否支持...

    一、发送方的代码用法如下:

    receiveWindow.postMessage(message, targetOrigin, [transfer]);

    receiveWindow是接收方的window对象。可以通过以下几种方法获得,例如window.open()方法返回的值就是打开页面的window对象,或者iframe元素的contentWindow属性能获得iframe标签内页面的window对象,等等。

    参数说明:

    message是你要发送到其他 window的数据。

    targetOrigin是接收方域,可指定该值(一般为接收方页面的window.origin),如果接收方窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送。该参数也可以是‘*’,表示对接收方的域没有任何限制。

    [transfer]是可选项,数组内的对象是实现Transferable接口的对象。它和message一样会被传递给目标页面,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

    二、接收方监听message事件,代码方法如下:

    window.onmessage = function(e){ }

    参数e为message实例,里面包含了data、origin、source等属性,data是发送方发送的message,origin是发送方所属的域,source是发送方的window对象的引用。

    示例:

    A域(A项目)html代码如下,里面嵌如B域页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>a域页面</title>
        <style>
            .myIframe {
                width: 500px;
                height: 300px;
                border: ridge;
                border-color: burlywood;
                margin: 15px 0 0 0;
            }
            button {
                color: #fff;
                background-color: #2d8cf0;
                border-color: #2d8cf0;
                border-radius: 4px;
                font-family: inherit;
                text-transform: none;
                display: inline-block;
                padding: 6px 15px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="aaaaa">
            <button onclick="send()">Send Message To Iframe</button>
        </div>
        
        <iframe id="proxy" class="myIframe" src="http://localhost:8081/spsarchive-webapp/web/zz/bbbbb.htm" ></iframe>
        
        <script type="text/javascript">
            function send(){
                var iframe= document.getElementById("proxy");
                if (iframe){
                    //iframe.contentWindow.postMessage("AAAAA","*");
                    iframe.contentWindow.postMessage("AAAAA", "http://localhost:8081");
                }
            }
        </script>
    </body>
    </html>


    B域(B项目)页面html代码如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>b域页面</title>
        <style>
            .btitle {
                text-align: center;
                margin-top: 10px;
            }
            .bclass {
                width: 100%;
                height: 100px;
                background-color: #3c536b4a;
                text-align: center;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div id="bbbbb">
            <div class="btitle">
                <span>I am b page!</span>
            </div>
            <div id="bContent" class="bclass">
            </div>
        </div>
        
        <script type="text/javascript">
            window.onmessage = function(e){
                console.info("received from A is: " + e.data);
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    壶公随感
    消息称微软受谷歌刺激 急于收购雅虎(zz)
    远程注销Windows用户
    "杀人"游戏中的一些规律
    由两点的经纬度估算距离
    我的城市?
    Blog里的一个bug,dudu看能否修正?
    这两天真烦
    发简历,找上海.Net方面软件开发工作
    "上海.NET俱乐部"聚会筹备进展
  • 原文地址:https://www.cnblogs.com/super-yu/p/9480589.html
Copyright © 2011-2022 走看看