对窗口对象的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. jvm 默认字符集

    最近在读取第三方上传的文件时,遇到一个问题,就是采用默认字符集读取,发现个别中文乱码,找到乱码的字,发现是生僻字:碶. 由于在window是环境下做的测试,并没有报错,但是在linux服务器上执行,发 ...

  2. Java基础笔记（一）——JDK、JRE、JVM

    JDK.JRE和JVM三者的关系 Java程序执行过程 JVM(java virtual machine) 注:由于各种操作系统(windows.linux等)支持的指令集(二进制可执行代码)不同,程 ...

  3. HDU-1281-棋盘游戏(最大匹配，枚举)

    链接:https://vjudge.net/problem/HDU-1281 题目: 小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些国际象棋里面的“车”,并且使得他们不能互 ...

  4. 爬虫（ProxyHandler）——代理

    工具:python3 步骤: 1)使用ProxyHandler()构建httpproxy_handler对象 2)使用build_opener(httpproxy_handler)构建opener 3 ...

  5. C# 连接oracle,用32位client和64位Client，可能导致结果不同

    在调用过程[pro_regentinitauth]时,有参数3-6为number类型,当我们用这样调用时,在32位client下,能正确得到输出参数3-6的结果为:1023, 但是,当我们把程序部署到 ...

  6. Ubuntu常用指令集

    Ubuntu Linux 操作系统常用命令详细介绍 ( 1)Udo apt-get install 软件名 安装软件命令 sudo nautilus 打开文件(有 root 权限)su root 切换 ...

  7. asp.net MVC 4.0 View回顾——布局页与分部页

    asp.net MVC 4.0中总结 视图里加载部分视图几种方法 @RenderPage() 但它不能使用 原来视图的 Model 和 ViewData ,只能通过参数来传递. @RenderPage ...

  8. new（） 与new

    一般写的时候,new对象都要加()

  9. postgresql 存储过程动态插入数据 2

    最近学习postgresql,正一个小活要用上,所以就开始学习了!然而,学习的过程极其艰辛,但却也充满了乐趣. 一般来说数据库的操作不外如何增,删,改,查,而首要的就是要添加数据到数据库中,因为以前的 ...

  10. mitmproxy抓包软件在mac上边的安装

    官网介绍:mitmproxy is a free and open source interactive HTTPS proxy. mitmproxy 是用 Python 和 C 开发的一个中间人代理 ...