zoukankan      html  css  js  c++  java

  • HTML5 跨域信息交互技术之 postMessage

          我们知道传统的HTML 规范中对于跨域的请求有这严格的限制，如果没有这个限制，将会发生很可怕的事情，设想一个场景当你在公司上班打开公司内部的管理信息系统，同时你打开了另一个外部网页页面， 那个外部网页中的动态脚本比如JS 脚本可以嗅探到你公司内部管理信息系统的内容，假如你公司的信息系统是一些敏感的信息时，其实你在不知不觉中已经泄漏了公司的信息，由此可能将会造成给公司很大的损失，所以浏览器是阻止这些跨域访问。

      但是现实生活中有一些合理的跨域名站点间的交互，读者可能知道 传统HTML 规范中关于跨域的解决方法，
    比如 iframe方式、jsonp方式等，今天我要说的是HTML5 中关于跨域数据交互方面的知识。
      
      HTML5中引入了 一个新的API 称为 postMessage ，其实postMessage不管是否有跨域操作， 都建议使用postMessage 来传递消息。
      
      废话不多说，看一个Demo 先。

    我们配置两个域名 http://www.yuetong.com/
                     http://my.bbs.com/

    在 http://www.yuetong.com/ 域下新建 comm_main.html, 地址 为http://www.yuetong.com/comm_main.html

    文件内容如下

    1. <!DOCTYPE html>
    2. <html>
    3. <head>    
    4.     <meta charset="utf-8"/>
    5.     <title>跨站通信 当前域 http://www.yuetong.com</title>
    6.     <script type="text/javascript">
    7. function sendMsg(){
    8.     if(typeof window.postMessage == undefined){
    9.         //
    10.         alert("对不起 您的浏览器不支持 postMessage 特性");
    11.         return false;
    12.     }
    14.     var msg = document.getElementById("message").value;
    15.     document.getElementsByTagName("iframe")[0].contentWindow.postMessage(msg,"http://my.bbs.com");
    17. }
    19. var originWhiteList = ["http://my.bbs.com"];
    20. function checkWhiteList(origin){
    21.     
    22.     for(var i=0; i< originWhiteList.length; i++){
    23.         if(origin == originWhiteList[i]){
    24.             return true;
    25.         }
    26.     }
    28.     return false;
    29. }
    31. /** 接受消息 */
    32. function messageHandler(e){
    33.     if(checkWhiteList(e.origin)){
    34.         processMessage(e.data);
    35.     }else{
    36.         // ignore message
    37.     }
    38. }
    40. function processMessage(d){
    41.     alert(d);
    42. }
    44. window.addEventListener("message", messageHandler, true);
    47.     </script>
    48. </head>
    49. <body>
    50. <h1>您好，我这里是http://www.yuetong.com/</h1>
    51. <input type="text" name="message" id="message" value=""/>
    52. <input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
    53. <br/>
    55. <iframe name="msg" src="http://my.bbs.com/comm_client.html" width="400" height="400"/>
    56. <div></div>
    57. </body>
    58. </html>

    在 http://my.bbs.com/ 域下新建 comm_client.html, 地址 为http://my.bbs.com/comm_main.html，文件内容如下
    1. <!DOCTYPE html>
    2. <html>
    3. <head>    
    4.     <meta charset="utf-8"/>
    5.     <title>跨站通信 当前域 http://my.bbs.com</title>
    6. <script type="text/javascript">
    8. var originWhiteList = ["http://www.yuetong.com"];
    9. function checkWhiteList(origin){
    10.     
    11.     for(var i=0; i< originWhiteList.length; i++){
    12.         if(origin == originWhiteList[i]){
    13.             return true;
    14.         }
    15.     }
    17.     return false;
    18. }
    20. function messageHandler(e){
    22.     if(checkWhiteList(e.origin)){
    23.         processMessage(e.data);
    24.     }else{
    25.         // ignore message
    26.     }
    27. }
    29. function processMessage(d){
    30.     var ta = document.getElementsByTagName("textarea")[0].value;
    31.     ta += d + "\n";
    32.     
    33.     document.getElementsByTagName("textarea")[0].value = ta;
    34. }
    36. function sendMsg(){
    37.     var msg = document.getElementById("message").value;
    38.     window.top.postMessage(msg,"http://www.yuetong.com");
    40. }
    42. window.addEventListener("message",messageHandler,true);
    44. </script>
    45. </head>
    46. <body>
    47. <h1>您好，我这里是 http://my.bbs.com/</h1>
    49. <input type="text" name="message" id="message" value=""/>
    50. <input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
    51. <textarea name="msg" rows="15" cols="40"></textarea>
    53. </body>
    54. </html>


    配图1，当再输入框中输入"你好，朋友" 可以看到iframe窗口中 收到消息。


    配图1

    我们在iframe 窗口中输入“我很好" ，主窗口收到消息并弹出 提示框




       其中最为重要 为增加  message 消息的监听和处理, 以及信任站点的配置。

    参考文献 : 《Pro HTML5 Programming 》
    http://blog.chinaunix.net/uid-14356162-id-3111324.html
  • 相关阅读:
    day22-20180522笔记
    day20-20180517笔记
    day19-20180515笔记
    day18-20180513笔记
    day17-20180510笔记
    day16-20180508笔记
    Python之初识面向对象
    Python之常用模块（2）
    Python之常用模块（1）
    Python之模块与包（下）
  • 原文地址：https://www.cnblogs.com/BeacherGong/p/2947413.html
Copyright © 2011-2022 走看看