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

     
  • 相关阅读:
    洛谷p1017 进制转换(2000noip提高组)
    Personal Training of RDC
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Eurasia
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Peterhof.
    Asia Hong Kong Regional Contest 2019
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia
    XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix.
    XVIII Open Cup named after E.V. Pankratiev. GP of SPb
    卜题仓库
    2014 ACM-ICPC Vietnam National First Round
  • 原文地址:https://www.cnblogs.com/wicub/p/3524012.html
Copyright © 2011-2022 走看看