对窗口对象的message事件进行监听

    window.addEventListener("message", function(event) {   

    // 处理程序代码  

    }, false);

使用window对象的postMessage()方法向其他窗口发送消息，该方法的定义如下：

  1. otherwindow.postMessage(message, targetOrigin);

该 方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何JavaScript对象（通过JSON转换对象为文本）；第二个参数为接收消 息的对象窗口的URL地址，可以在URL地址字符串中使用通配符“*”指定全部地址，不过建议使用准确的URL地址。otherwindow为要发送窗口 对象的引用，可以通过window.open()方法返回该对象，或通过对window.frames数组指定序号（index）或名字的方式来返回单个 frame所属性的窗口对象。

<script type="text/javascript" src="http://wwww.yowu.com/Tpl/default/Public/js/jquery.js"></script>

        <script>

        $(function(){

            window.parent.postMessage("<?php echo $payFlag . '|'. intval($out_trade_no);?>", '*');

        });

        </script>

示例

    <!DOCTYPE html>  

    <html>  

       <head>  

           <meta charset="UTF-8"/>  

           <title>跨文档消息传输示例主文档</title>  

           <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  

           <script type="text/javascript">  

    $(function() {   

       // 监听message事件。   

       window.addEventListener("message", function(event) {   

           // 忽略指定URL之外的页面发送的消息。   

           if(event.origin != "http://www.blue-butterfly.net") return;   

           alert(event.data); // 显示消息。   

       }, false);   

       $("#iframeContent").load(function(event) {   

               // 向子页面发送消息   

           this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/");   

       });   

    });   

           </script>  

       </head>  

       <body>  

           <header>  

               <h1>跨域通信示例</h1>  

           </header>  

           <iframe id="iframeContent" width="400" src="http://www.blue-butterfly.net/test/"></iframe>  

       </body>  

    </html>

子页面中的代码如下:

    <!DOCTYPE html>  

    <html>  

       <head>  

           <meta charset="UTF-8"/>  

           <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  

           <script type="text/javascript">  

    $(function() {   

       window.addEventListener("message", function(event) {   

           if(event.origin != "http://Lulingniu") return;   

           $("#console").append(event.origin).append("传来的消息：").append(event.data);   

                   // 向主页面发送消息。   

           event.source.postMessage("Hello, there is :" + this.location, event.origin);   

       }, false);   

    });   

           </script>  

       </head>  

       <body>  

           <p>这是iframe中的内容。</p>  

           <div id="console"></div>  

       </body>  

    </html>

  • 通过对window对象的message事件进行监听，可以接收消息。

  • 通 过访问message事件的origin属性，可以获取消息的发送源（本例中主页面的发送源为“http://Lulingniu”， 子页面的发送源为“http://www.blue-butterfly.net”）。注意：发送源与网站的URL地址不是一个概念，发送源只包括域名与 端口号，为了不接收其他源恶意发送过来的消息，最好对发送源做检查。

  • 通过访问message事件的data属性，可以取得消息内容（可以是任何JavaScript对象，使用JSON）。

  • 使用postMessage()方法发送消息。

  • 通过访问message事件的source属性，可以获取消息发送源的窗口的代理对象。

 

HTML5 跨文档消息传输的更多相关文章

  1. HTML5新特性之跨文档消息传输

    1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口 ...

  2. HTML5跨文档消息传递

    HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...

  3. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  4. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  5. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  6. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  7. 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...

  8. 2.Java实现基于SOAP的XML文档网络传输及远程过程调用(RPC)-

    转自:https://blog.csdn.net/a214919447/article/details/55260411 SOAP(Simple Object Access Protocol,简单对象 ...

  9. Web 通信技术 ——跨文档信息传输(JavaScript)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

随机推荐

  1. 多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)

    注明:内容来处https://www.cnblogs.com/ss977/p/5846176.html 1.现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显 ...

  2. uoj#352. 新年的五维几何（概率期望+爆搜）

    传送门 我还以为这是个五维半平面交呢--结果没看数据范围-- 题解 //minamoto #include<bits/stdc++.h> #define R register #defin ...

  3. AcDbHelix Demo

    AcDbObjectPointer<AcDbHelix> aHelix; aHelix.create(); aHelix->setAxisPoint(AcGePoint3d(, , ...

  4. IT兄弟连 JavaWeb教程 监听器1

    1  基本概念 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程序,这个程序 ...

  5. 笔记-JavaWeb学习之旅14

    JSTL:JavaServer Pages Tag Library JSP标准标签库 if标签 <%@ page import="java.util.ArrayList" % ...

  6. php高并发之opcache

    今天工作的时候接触到客户的一台服务器,业务逻辑比较简单 .估算pv在120w左右吧,用的是阿里云2c4g的服务器.一大早就开始卡顿了,登陆服务器后查看负载到了八九十. 之后就想办法调整一下吧.突然想起 ...

  7. ADO.NET 学习链接

    在博客园上,这个系列的文章对ADO.NET 总结的很好. ADO.NET 系列文章

  8. $.extend(),与$.fn.extend() 讲解（一）

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  9. HDU-3499:Flight（SPFA+dp）

    Recently, Shua Shua had a big quarrel with his GF. He is so upset that he decides to take a trip to ...

  10. selenum autoit上传图片

    目前,一般实现文件图片上传的方式都是有一个按钮,点击之后直接调用操作系统自身的弹框,选择文件后,实现上传.因为Selenium不支持调用操作系统的操作,所以这种情况下,利用Selenium无法完成图片 ...