图一Input.html
我输入我是一只狗
,然后发送给图二View.html
页面。view
页面如何接收
、展示
接收到的信息并更新
相应位置的html
?不刷新view
页面的前提下
来更新下解决的办法,采用的是最佳答案小伙伴的方法。其他答案没有真正去试过,因为直觉告诉我postMessage
最直接也最简单能解决我的问题:
// 发送数据方
var domain = 'http://web.com';
var myPopup = window.open(domain + '/canteen_code/consume_user.html','myWindow');
myPopup.postMessage(result, domain);
// 接收数据方
window.addEventListener('message', function(event) {
if(event.origin !== 'http://web.com') return;
console.log('message received: ' + event.data,event);
},false);
上面我贴的这段代码很普遍也很普通,相信百度一搜很多一样的代码。但是细枝末节还需要自己把握,直至今天下午对这个问题的解决才让我真正了解之前失败的原因,和必须要注意的事项:
otherWindow.postMessage(message, targetOrigin, [transfer]);
这段是官网给出的发送数据的基本语法。需要注意的是otherWindow
这个必须是其他窗口的一个引用。可以但不仅仅是iframe
的contentWindow
属性、执行window.open
返回的窗口对象、或者是命名过或数值索引的window.frames
targetOrigin
这个参数也是重点。摘自官网的回答:如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
以上。(对了,另附上postMessage
中文解释网址,postMessage中文解释)
由于项目的需要,导致整体的结构要变
两个页面要在两个不同浏览器上打开
然后实现html
更新,所以postMessage
这种方法貌似适用不了otherWindow
的局限性,之前我是采用window.open
的方式即时打开页面获取对象
所以改为采用websocket
的方式进行数据传递
楼下凡有提到socket
的小伙伴全都给赞一波
另外有不错的关于socket
文档可以推荐下workerman
和swoole
这两个架构太庞大了而我涉及的只有两个页面之间的交互而已。
所以,拜托各位啦
不知怎么的就被弄到这期的热门问题里去了,为了各位同学不再踩坑,我把最后的解决方案补一下吧。
因为是两个浏览器页面之间的数据同步操作,所以长连接
、轮巡
、socket
是比较可靠的方案,下面答案的回答的方法我基本都试过,说几个其中试过的:
postMessage
只适用于在某个页面的基础上打开另一个页面的场景
野狗
因为是第三方,所以数据被他们拿到,总感觉有些不舒服
socket
最后用的解决方案,可靠,高效,在本地环境下就可以搭建,无需通过第三方周转
解决方案用的是:workerman
的WEB消息推送框架,有兴趣的童鞋可以点进去看看,唯一的缺憾是在win
环境下 需要在cli
模式下运行。
好了,就到这里。再次感谢各位的回答和关注。
postMessage
websocket实时推送
做到实时而不刷新页面,可以使用一下两种方法实现
1、a页面发送数据,在b页面,定时轮询,监测a页面是否有数据更新,如果有,则刷新数据。
2、使用websocket;在a页面发送数据,b页面主动监测是否有数据发送,如果有新数据则主动刷新
以上两种方法都可以实现,像sf的消息提示,就是楼主所指的方式实现。
socket.io(非php) 或者是 swoole的websocket,你可以理解为就是聊天室
感觉最专业的方法应该是用socket.io写。
页面一将数据存入localStorage.页面二写个定时查询(Storage监听),有值或者值发生改变则操作dom更新数据。
或者取巧一点,直接在第二个页面加window绑定focus事件,看它的时候再读取localStorage。
补充楼上:通过ajax轮询可以实现
也可以来点更好玩的/滑稽
多开
DEMO
页面,在一个页面上画画,另一个页面实时同步野狗实时数据同步
DEMO
可以使用mvc框架实现,全程数据驱动
简单点就是用ajax异步轮询请求后端,然后更新html就好
实在不行就粗暴点view页面定时请求数据更新