我可以用一个 HTML5 应用程序控制两个浏览器窗口吗？答案

【问题标题】：Can I control two browser windows with one HTML5 app?我可以用一个 HTML5 应用程序控制两个浏览器窗口吗？
【发布时间】：2016-12-13 08:17:52
【问题描述】：

我希望我的 HTML5 应用在两个不同的屏幕上绘图。这（我认为）意味着我需要有两个不同的浏览器窗口，每个屏幕上一个。这可能吗？看来我真的必须将同一个应用程序加载到两个窗口中，并以某种方式让窗口相互通信。我找不到如何做到这一点的例子。我怎样才能做到这一点？

更精彩的是：可能不涉及服务器，只是从文件系统本地提供的应用程序。

【问题讨论】：

Communication between tabs or windows的可能重复

标签： javascript html multiple-monitors

【解决方案1】：

无需使用本地存储或（不寒而栗）cookie 的凌乱轮询基础架构。假设这两个页面来自同一个域，那么实现跨窗口通信是很简单的只要第二个窗口由第一个窗口打开。

In your main window:（click here for JSFiddle demo 和 here for the secondary page's code）

var win2;
function openSecondaryWindow() {
   return win2 = window.open('win2.html','secondary','width=300,height=100');
}

$(function() {

    if (!openSecondaryWindow()) // Try to open the window.  This will likely be blocked by a popup blocker (unless you disable it).
        $(document.body) // If it is blocked, clicking a link usually allows the popup to be spawned.
        .prepend('<a href="#">Popup blocked.  Click here to open the secondary window.</a>')
        .click(function() { openSecondaryWindow(); return false; });

    $('#somelink').click(function() {
        if (win2) win2.doSomething(); // Obviously, you'll need to define doSomething in the second page
        else alert('The secondary window is not open.');
        return false;
    });
});

一旦您的主窗口打开了辅助窗口，win2 将引用第二页的window 对象——换句话说，就是页面的全局范围。您将可以访问您在第二页中定义的所有函数和变量。

因此，您可以通过函数调用传递数据。

win2.update({ key: 'value', ... });

在您的辅助窗口中，您可以通过opener 属性回调主窗口中的函数，该属性将引用您主窗口的window 对象。（这在 JSFiddle 演示中得到了演示。）

更新： Intercom 是一个使用本地存储实现窗口间广播消息的库。当数据更改时，本地存储会触发一个事件 (onstorage)，因此实际上不需要轮询。 Intercom 允许域中的所有页面进行通信，无论它们是如何打开的。

【讨论】：

我试图考虑在打开和关闭窗口等之间保持状态，但是对于 Ned 在他的帖子中提出的要求，你的解决方案要好得多。好东西。

【解决方案2】：

这可能是你可以使用websockets 的东西，让每个窗口将其信息发送回应用程序，然后更新它们，但并非所有浏览器都支持这些，事实上我相信目前由于规范的安全问题，从大多数版本中删除。

对于离线应用，如果它们位于同一个域（我假设它们会在本地），您可以使用本地存储甚至 cookie，然后让应用轮询存储 api 的更改？

我自己最近一直在做一些离线本地存储的实验，我能够在本地使用 Chrome 维护窗口之间的状态，在 Firefox 中这不起作用，但我相信它在 FF4 RC 中已修复

编辑 2：

在两个文件中快速而肮脏的概念证明：

索引 1：

<body>

<div id="result">x</div>

</body>
<script type="text/javascript">
var i = 0;

function update(){  
    setTimeout(function(){
        localStorage.setItem("bar", i);
        document.getElementById('result').innerHTML = "localstorage set to " + localStorage.getItem("bar");
        i++;
        console.log(i);
        update();          
    }, 2000);
}

update();

</script>

索引 2：

<body>

<div id="result">s</div>

</body>
<script type="text/javascript">

function update(){  
    setTimeout(function(){
        document.getElementById('result').innerHTML = localStorage.getItem("bar");    
        update();
    }, 1000);
}

update();

</script>

在本地 Chrome 的不同窗口中打开它们，第二个将显示第一个窗口中循环设置的状态。我发现仍然无法在 FireFox 4 中工作（Mozilla 开发人员昨天向我发誓离线本地存储现在可以工作了，哦，好吧）。你可以通过http://www.modernizr.com/ 让它在 IE 中工作，但我还没有测试过。

【讨论】：

这是一个有趣的想法。不过，我可能没有涉及服务器（我更新了问题）。
这是一个有趣的问题，我更新了我的答案，增加了一些想法，也许使用本地存储甚至 cookie 是可行的方法？