zoukankan      html  css  js  c++  java
  • HTML5 跨文档消息传输

    对窗口对象的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属性,可以获取消息发送源的窗口的代理对象。

     
  • 相关阅读:
    OpenStack对象存储——Swift
    使用ssh对服务器进行登录
    在MacOs上配置Hadoop和Spark环境
    DOTA与面向对象的编程思想(3)——英雄的生命周期
    DOTA与面向对象的编程思想(2)——三层架构,让游戏跑起来
    DOTA与面向对象编程思想(1)——分述DOTA和面向对象思想
    再谈面向对象
    linux C 列出目录中的文件列表 包含文件的相关信息
    在Ubuntu 64位下搭建samba,实现linux与windows之间的资源共享,配置实现Ubuntu启动后samba服务与ssh服务开机自动启动
    LINUX下使用elasticsearch-jdbc工具实现MySQL同步到ElasticSearch 以及linux 64位centos系统安装jdk1.8
  • 原文地址:https://www.cnblogs.com/wicub/p/3524012.html
Copyright © 2011-2022 走看看