[学习笔记] 【学习笔记】「充实计划-每日打卡」0629 奖励方式：回复跟帖（只包含内容1奖励 ... [推广有奖]

71楼

守候烟雨 发表于 2019-6-29 23:43:08

昨日阅读0.5小时，累计阅读425.5小时

已有 1 人评分	论坛币	收起理由
充实每一天	+ 10	精彩帖子

总评分: 论坛币 + 10 查看全部评分

72楼

HappyAndy_Lo 发表于 2019-6-29 23:50:14

昨日阅读实践3小时，累计558小时

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>