跨域、跨文档传输数据(三)---- postMessage ; 实现跨文档消息传输;

本文详细介绍了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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值