postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.
要发送到其他窗口的数据,它将会被 !结构化克隆算法 序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.
通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"
是一串和message同时传递的 Transferable 对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.
下面是打印出的结果 data属性为传输过来的数据
若用到的地方很多 建议加上 targetOrigin 属性 并且给数据加好type确保数据正确的被接收
欢迎对这个有研究、有兴趣或者发现文章有错误的地方的伙伴们和我交流,共同进步~~~
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.addEventListener('load',function(){
// 点击t-1时同时触发t-2点击
document.getElementById('x-1').addEventListener('click',function(e){
console.log(e.target.id)
// 创建事件对象
var event = document.createEvent('HTMLEvents')
event.initEvent('click', false,false)
event.eventType = 'message'
// 把事件触发信息传递给兄弟节点
e.target.nextElementSibling.dispatchEvent(event)
})
document.getElementById('x-2').addEventListener('click',function(e){
console.log(e.target.id)
})
})
</script>
</head>
<body>
<ul>
<li id="x-1">t-1</li>
<li id="x-2">t-2</li>
</ul>
</body>
</html>
1 这两个页面如果是嵌套关系的话，就是其中一个是另一个的iframe里面的页面的话，可以通过iframe相互获取的方式，来传值参考
http://www.jb51.net/article/34942.htm
2 如果这两个页面不是在同一个window内的话，可以通过window.opener或者window.showModalDialog PS:子窗口可以通过设置window.returnValue设置页面返回值
比如: window.returnValue=’OK’window.close()
参考
http://blog.csdn.net/zj1103/article/details/4152274
3 推荐第一种方式传值。，如果不是在同一窗口即同一页面的话，js传值非常麻烦
