浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）

postMessage 是 html5 引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

一、Window postMessage() 方法介绍

postMessage() 方法用于安全地实现跨源通信。（只有同源脚本才能相互通信，window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。）

1、语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

（1）otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

（2）message：将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

（3）targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。

在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；

只有三者完全匹配，消息才会被发送。

这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。

如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

（4）transfer可选：是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2、接收数据：监听message事件的发生


// 执行如下代码, 其他window可以监听分发的message:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {var origin = event.originif (origin !== "http://example.org:8080") return;// ...
}

message 的属性有:

（1）data：从其他 window 中传递过来的对象。

（2）origin：调用 postMessage 时消息发送方窗口的 origin。

这个字符串由协议、“

浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）相关推荐

你值得拥有！更省钱地完成数据监听
作者 | 梁唐来源 | TechFlow(ID:techflow2019) 大家好,今天一起来了解一个新的设计模式--观察者模式. 观察者模式的思路很简单,它被广泛地应用在各种数据监控上. 很多时候 ...
Python黑客编程基础3网络数据监听和过滤
Python黑客编程3网络数据监听和过滤课程的实验环境如下: • 操作系统:kali Linux 2.0 • 编程工具:Wing IDE • Python版本:2.7. ...
Python黑客编程3网络数据监听和过滤
课程的实验环境以下: • 操作系统:kali Linux 2.0 • 编程工具:Wing IDE • Python版本:2.7.9 • 触及到的主要python ...
我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）
提示:个人Vue学习工作总结 (持续更新中如果有不对的地方还请前辈多多指点) 文章目录 vue 计算属性 computed vue 数据监听 wacth 提示:以下是本篇文章正文内容,下面案例可供 ...
Object.defineProperty与双向绑定、数据监听
一.对象赋值的两种方式一是"="赋值,一是Object.defineProperty方法,而当下流行框架中广泛应用的双向绑定和数据监听等,就是利用的第二种方式,关于此方法不多讲, ...
java bean 监听_事件监听器?将JavaBeans接通起来的方法
摘要 JavaBeans 通过事件( 封装着与所发生情况有关的数据的对象) 与其它软件组件进行通讯. 本文将向你展示如何利 ...
vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
vue，watch监听数据，数据监听
vue,watch监听数据,数据监听三个值: 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep:其值是true或false:确认是否深入监听.(一般 ...
Web3j通过合约地址监听transfer事件获取以太坊交易数据
Web3j通过合约地址监听transfer事件获取以太坊交易数据 We3j web3j是一个轻量级的Java库,用于在Ethereum网络上集成客户端(节点). 核心特性通过Java类型的JSON- ...

浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）

浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）相关推荐

最新文章

热门文章