对窗口对象的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. 51nod1101(dp)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1101 题意:中文题诶- 思路:dp 我们用dp[i][j]存 ...

  2. poj 2407 欧拉函数裸题

    http://poj.org/problem?id=2407 题意:多组数据,每次输入一个数 ,求这个数的欧拉函数 int euler_phi(int n){//单个欧拉函数 int m=(int)s ...

  3. 搭建Windows IIS（Internet Information Server）服务器

    1.找到 控制面板\程序 点击 “打开或关闭Windows功能” ,全部选上“Internet信息服务”,这里可能要等几分钟. 2.完成之后你打开C盘,在他的根目录下多出一个inetpub文件夹里面有 ...

  4. 从各处收集的switch语句

    重构之重复代码: 1.(重复代码是)语义一致的逻辑 反例:语义一致的逻辑产生了多个实体 缺点:如果你为语义一致的逻辑产生了多个实体,那么当需要修改这个逻辑时,你必须保证同时修改所有的实体,并确保它们是 ...

  5. java获取本机ip的方法

    直接上代码: public class LocalIPUtil { public static String getLocalIp(HttpServletRequest request){ Strin ...

  6. Swing 实现的Gui链表

    https://gitee.com/dgwcode/MyJavaCode -Freight类可以实现的功能·构造方法:初始空车厢有5个·装货:当运往某地点的货物大于等于4个的时候,如果有空车箱,则先占 ...

  7. python进阶01 面向对象、类、实例、属性封装、实例方法

    python进阶01 面向对象.类.实例.属性封装.实例方法 一.面向对象 1.什么是对象 #一切皆对象,可以简单地将“对象”理解为“某个东西” #“对象”之所以称之为对象,是因为它具有属于它自己的“ ...

  8. Codeforces Round #431 (Div. 2) C

    From beginning till end, this message has been waiting to be conveyed. For a given unordered multise ...

  9. CSS3动画总结学习(一)

    参考文章: CSS3 Transitions, Transforms和Animation使用简介与应用展示 CSS 参考手册 动画的分类 平移动画 transform: 就是变换, 变换, 变换 也就 ...

  10. ms sqlserver 登录失败 错误：4064

    无法打开用户默认数据库.登录失败.用户‘sa’登录失败.(Microsoft SQL Server, 错误:4064) 解决方法:解决方法:先用windows身份验证的方式登录进去,然后在 安全性=& ...