之前写过两篇解决跨文档消息传输的解决方案。其中 一种使用了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:跨域传输数据主页面</