巴扎黑2017-05-19 10:30:21
根据你的描述,应该是两个同域(相同的协议、主机名、端口)的网页进行通讯,这样的话就可以通过 h5 的 localStorage 来实现。不需要通过服务端。
1、当 a 页面的按钮点击之后,设定一对新的 localStorage 值。
$("#in").click(function(){
localStorage.setItem("setText","hello")
})
2、在 b 页面监听 window 的 storage 事件。当这个事件被触发,说明存储数据变化了,通过 event 事件对象的 key 属性判断变化的键值,如果是我们设定的 setText,就可以给 $("#out") 设置内容了。
window.addEventListener("storage",function(e){
if(e.key=="setText"){
var text=localStorage.getItem("setText")
$("#out").text(text);
}
});
因为 b 页面监听的是 storage 事件,刷新页面之后,如果 a 页面点击时候设置的 setText 值还是原来的值的话,这个事件就不会被触发。要想让 b 页面刷新后的这个元素仍然显示刚刚设置的值,还应该在 b 页面添加一个判断:
if(localStorage.getItem("text")){
h.innerText=localStorage.getItem("text")
}
有什么问题的话,希望可以探讨一下。
黄舟2017-05-19 10:30:21
如果是iframe的话,使用postMessage
如果是两个单独网页的话,要在服务端做一个转发,A页面发送数据,服务器存入数据库,B页面做一个轮询,查询数据是否有变化,有变化则更新数据