对窗口对象的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. ue4 创建简易动画

    这个功能本来是在原动画基础上做调整用的,所以直接用来做动画并不是很合适,如果要做复杂动画,叠加的轨迹会非常多,不好用 (蒙皮好的)模型右键,创建一个动画合成 点开这个动画合成,创建动画序列(就是普通动 ...

  2. 使用Unity实现动态2D水效果

    http://forum.china.unity3d.com/thread-16044-1-1.html 在这片教程里面我们将会用简单的物理效果来模拟动态的2D水效果.我们将会使用Line Rende ...

  3. 3dmax————

    去掉阴影 建模中去掉阴影,有时候阴影会挡住视野 , 显示法线 转到可编辑网格,选择面,选择 ,注意下面那个比例调大点,否则看不清楚

  4. 「GXOI / GZOI2019」逼死强迫症——斐波那契+矩阵快速幂

    题目 [题目描述] ITX351 要铺一条 $2 \times N$ 的路,为此他购买了 $N$ 块 $2 \times 1$ 的方砖.可是其中一块砖在运送的过程中从中间裂开了,变成了两块 $1 \t ...

  5. IT兄弟连 Java语法教程 变量2

    变量的作用域和生命周期 到目前为止,使用的所有变量都是在main()方法开始时声明的,然而,Java允许在任何代码块(代码块以开花括号开始,以闭花括号结束)中声明变量,代码块定义了作用域.因此,每当开 ...

  6. JSF 与 struts2

    http://suhuanzheng7784877.iteye.com/blog/1041411

  7. 微信小程序实战

    为了积攒粉丝,公司决定做一个一分钱姓名测算的小程序引导大家关注公众号. 实现的需求就是  1 首页 用户编辑姓名和性别进行提交 2 测算结果页 实现分享和支付功能 3 测算历史页面 看到用户曾经测算记 ...

  8. render函数和redirect函数的区别+反向解析

    render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象)   request对象:----->所有的请求 ...

  9. thinkphp 2.1代码执行及路由分析

    Dispatcher.class.php这个文件中是url路由,由于第一次正式看路由那块,所以就从头开始一行一行看把. 首先是dispatch函数 是37行到140行 这个函数是做映射用,把url映射 ...

  10. sesstionStorage和localStorage

    使用: 对于多页面的pc端,为了同步多页面的消息提醒,可以将数据储存在localStorage中,多页面共享同一个localStorage.然后使用setInterval轮询获取数据,执行逻辑代码 s ...