HTML5+CSS3-充实笔记0630

HappyAndy_Lo

624

收藏 2019-06-30

ch10. Communication API

网页文档之间实现互相接收与发送信息的功能（实现跨文档消息通信）
XMLHttpRequest的升级版实现了跨源XMLHttpRequest和进度事件功能

跨文本消息通信（Cross Document Messaging）和XMLHttpRequest Level 2是构成实时跨源通信的两个模块
不管同域或不同域，都可以创建安全通信的Web应用。

运行流程：

发送消息的页面称Host Page，接收的页面称Client Page。Host Page有两种方式发送：1）是指定目标，2）是广播。Host Page发送消息后，Client Page可以接收相同协议的Host Page发送过来的消息，且在Client Page有一个权限验证的过程，用于验证消息来源是否可信。
跨文档消息通信主要涉及源安全问题。源由规则（Scheme）、主机（host）、端口（port）组成。主要防止内容注入

hostWindow.postMessage(message, ClientPage);
添加监听消息事件，通过Windows对象的Message事件添加监听，访问message对象的origin属性获取消息发送源的域，若该域可信，则通过message对象的data属性接收消息，否则忽略。

使用postMessage API创建应用

<!DOCTYPE html>
<html>
<head>
   <title>10.2.1</title>
   <meta charset="utf-8" />
   <script type="text/javascript">
      window.onload=function init(){
         if(typeof window.postMessage === undefined){
               alert("该浏览器不支持postMessage.");
               return ;
         }

         window.addEventListener("message", function(ev){
               if(ev.origin!="http://localhost:8081"){
                  return;
               }
               document.getElementById("receiveMsg").innerHTML="来自"+ev.origin+"的消息："+ev.data;
         }, false);
      }
   </script>
</head>
<body>
   <iframe src="http://localhost:8081/" width="400"></iframe>
   <h2 id="receiveMsg"></h2>
</body>
</html>