图一 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中文解释 ) 1.24来更新由于项目的需要，导致整体的结构要变两个页面要在两个不同浏览器上打开然后实现 html 更新，所以 postMessage 这种方法貌似适用不了 otherWindow 的局限性，之前我是采用 window.open 的方式即时打开页面获取对象所以改为采用 websocket 的方式进行数据传递楼下凡有提到 socket 的小伙伴全都给赞一波另外有不错的关于 socket 文档可以推荐下 workerman 和 swoole 这两个架构太庞大了而我涉及的只有两个页面之间的交互而已。所以，拜托各位啦 3.29更新不知怎么的就被弄到这期的热门问题里去了，为了各位同学不再踩坑，我把最后的解决方案补一下吧。因为是两个浏览器页面之间的数据同步操作，所以长连接、轮巡、 socket 是比较可靠的方案，下面答案的回答的方法我基本都试过，说几个其中试过的： postMessage 只适用于在某个页面的基础上打开另一个页面的场景野狗因为是第三方，所以数据被他们拿到，总感觉有些不舒服 socket 最后用的解决方案，可靠，高效，在本地环境下就可以搭建，无需通过第三方周转解决方案用的是： workerman 的 WEB消息推送框架，有兴趣的童鞋可以点进去看看，唯一的缺憾是在 win 环境下需要在 cli 模式下运行。好了，就到这里。再次感谢各位的回答和关注。

做到实时而不刷新页面，可以使用一下两种方法实现 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页面定时请求数据更新

a页面，将结果本地存储，b页面定时器或长轮询实时获取本地存储，然后判断本地存储是否有值

两个页面进行交互，如何实现页面不刷新就更改html？

命中水ヽ

5k12104154

发布于
2017-01-13

更新于
2017-03-29

图一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中文解释)

1.24来更新

由于项目的需要，导致整体的结构要变
两个页面要在两个不同浏览器上打开
然后实现html更新，所以postMessage这种方法貌似适用不了
otherWindow的局限性，之前我是采用window.open的方式即时打开页面获取对象
所以改为采用websocket的方式进行数据传递
楼下凡有提到socket的小伙伴全都给赞一波
另外有不错的关于socket文档可以推荐下
workerman和swoole这两个架构太庞大了而我涉及的只有两个页面之间的交互而已。
所以，拜托各位啦

3.29更新

不知怎么的就被弄到这期的热门问题里去了，为了各位同学不再踩坑，我把最后的解决方案补一下吧。
因为是两个浏览器页面之间的数据同步操作，所以长连接、轮巡、socket是比较可靠的方案，下面答案的回答的方法我基本都试过，说几个其中试过的：

postMessage 只适用于在某个页面的基础上打开另一个页面的场景
野狗 因为是第三方，所以数据被他们拿到，总感觉有些不舒服
socket 最后用的解决方案，可靠，高效，在本地环境下就可以搭建，无需通过第三方周转

解决方案用的是：workerman的WEB消息推送框架，有兴趣的童鞋可以点进去看看，唯一的缺憾是在win环境下需要在cli模式下运行。

好了，就到这里。再次感谢各位的回答和关注。

html5 html javascript php

阅读 18.1k

15 个回答

vsion

✓ 已被采纳

otherWindow.postMessage(message, targetOrigin, [transfer]);

叶凡

803

发布于
2017-03-24

点击浏览器窗口之前看过一个同学

// 当前窗口是否激活
    (function () {
        var title = document.title;
        // 各种浏览器兼容
        var hidden, visibilityChange
        if (typeof document.hidden !== 'undefined') {
            hidden = 'hidden'
            visibilityChange = 'visibilitychange'
        } else if (typeof document.webkitHidden !== 'undefined') {
            hidden = 'webkitHidden'
            visibilityChange = 'webkitvisibilitychange'
        } else if (typeof document.mozHidden !== 'undefined') {
            hidden = 'mozHidden'
            visibilityChange = 'mozvisibilitychange'
        } else if (typeof document.msHidden !== 'undefined') {
            hidden = 'msHidden'
            visibilityChange = 'msvisibilitychange'
        }
        // 添加监听器，在title里显示状态变化
        document.addEventListener(visibilityChange, function () {
            if (document[hidden]) {
                document.title = '你离开了，快回来...'
            } else {
                document.title = title
            }
        }, false)
    })();