跨域、跨文档传输数据（三）---- postMessage ；实现跨文档消息传输；

最新推荐文章于 2024-05-11 14:56:34 发布

JYX8

最新推荐文章于 2024-05-11 14:56:34 发布

阅读量1.8k

点赞数

分类专栏： html5 iframe 文章标签： html5

本文链接：https://blog.csdn.net/J_Y_X_8/article/details/51612259

版权

本文详细介绍了HTML5的postMessage方法在跨文档消息传输中的应用，包括如何监听窗口对象、发送消息的语法以及跨域通信的案例。通过postMessage，可以实现在不同源的网页之间进行安全的通信，并且提到了origin属性用于检查发送源，data属性获取消息内容，以及source属性获取消息源窗口对象的重要性。同时，文章强调了对发送源进行检查以防止恶意消息的必要性。

摘要由CSDN通过智能技术生成

之前写过两篇解决跨文档消息传输的解决方案。其中一种使用了MessageJS的插件方法，其实MessageJS

这个插件的原理就是使用了HTML5提供的postMessage；

一下讲讲，postMessage的实际用法以及基本知识：

HTML5提供了在网页之间互相接受与发送消息的功能；

可以获取到网页所在窗口的对象实例，不进同源（域+端口号）的web网页之间的互相通信，也可以实现跨域通信；

兼容性：

IE8+,
Firefox 3.1+,
Opera 9+,
Safari,
Chrome

首先：想要接收从其他窗口发过来的消息，就必须对窗口对象进行监听：

监听方法：

window.addEventListener("message", function(e){
  ...}, false);

发送消息：

/**
*  @message:发送的消息文本，可以是数字。字符串，也可以是javascript的对象（通过JSON转换为对象文本）；
*  @origin:接收消息的对象窗口的URL地址（例如http://1.1.1.1:8080；带端口号。），这个参数也可以使用
*          通配符"*"，意思是指定发送给全部的地址，这样的话所有的网页都能收到你发来的消息，友情提示：
*          不建议这么用，最好使用指定的URL；该参数发送时，只包括域和端口号；
*/
otherWindow.postMessage(message,origin);

案例
以下案例，来说明iframe在使用postMessage跨域传输数据；
父页面和子页面，在不同的主机上发布（IP地址不同）

跨域通信 — 主（父）页面 postParent.html：

<!DOCTYPE html>
<html>
<head>
<title>postMessage：跨域传输数据主页面</

最低0.47元/天解锁文章

JYX8

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
跨域、跨文档传输数据（三）---- postMessage ；实现跨文档消息传输；

之前写过两篇解决跨文档消息传输的解决方案。其中一种使用了MessageJS的插件方法，其实MessageJS这个插件的原理就是使用了HTML5提供的postMessage；一下讲讲，postMessage的实际用法以及基本知识：HTML5提供了在网页之间互相接受与发送消息的功能；可以获取到网页所在窗口的对象实例，不进同源（域+端口号）的web网页之间的互相通信，也可以实现跨域通信；首先：想要接收
复制链接

扫一扫