对窗口对象的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. SAP屏幕字段常用代码集合

    SAP屏幕字段常用代码集合 ().Screen 设计 TABLES: SSCRFIELDS. PARAMETERS: P_EBLEN LIKE VBRK-EBLEN DEFAULT ' '. PARA ...

  2. 关于setTimeout(fn,0)

    JS是单线程引擎:它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javasc ...

  3. TensorBoard计算加速

    目录 TensorBoard计算加速 0. 写在前面 1. TensorFlow使用GPU 2. 深度学习训练并行模式 3. 多GPU并行 4. 分布式TensorFlow 4.1 分布式Tensor ...

  4. 第一个Three.js程序——动手写一个简单的场景

    三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. shell中括号总结: {}, (), (()), [], [[]]

    括号总结 () 单小括号 命令组,括号中的命令将会开一个新的子shell执行 括号中变量不能被剩下脚本使用 命令之间分号隔开 命令和括号之间可以没有空格 命令替换,等同于``反引号 $(xxx)会被替 ...

  6. beanshell解析json（从简单到复杂）

    使用beanshell 解析单层Json: Json 数据如下: { "status":200, "code": 0, "message": ...

  7. Mybatis 查询一个对象包含多个子对象 (List 包含 List)

    功能:查询一个数据列表 且每个数据中包含各自的子数据集合 使用场景:1. 当需要查询多订单数据且同时订单数据中需要包含订单明细数据时 2. 当需要查询多评论数据且同时评论数据中需要包含评论回复数据时 ...

  8. Zeppelin的入门使用系列之使用Zeppelin来创建临时表UserTable（三）

    不多说,直接上干货! 前期博客 Zeppelin的入门使用系列之使用Zeppelin运行shell命令(二) 我们必须要先使用Spark 语句创建临时表UserTable,后续才能使用Spark SQ ...

  9. JSONModel 简单例子

    // ProductModel.h // JSONModel // // Created by 张国锋 on 15/7/20. // Copyright (c) 2015年 张国锋. All righ ...

  10. 使用 h5 新特性，轻松监听任何 App 自带返回键

    var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...