[学习笔记] HTML5+CSS3-充实笔记0630 [推广有奖]

51关注
7粉丝

已卖：1068份资源

大师

27%

还不是VIP/贵宾

威望: 1 级
论坛币: 83484 个
通用积分: 13809.4076
学术水平: 678 点
热心指数: 833 点
信用等级: 744 点
经验: 427061 点
帖子: 17379
精华: 0
在线时间: 3622 小时
注册时间: 2016-7-9
最后登录: 2026-1-22

楼主

HappyAndy_Lo 发表于 2019-6-30 10:26:46 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

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>