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

Question

我希望我的HTML5应用程序能够绘制到两个不同的屏幕上。 这（我认为）意味着我需要两个不同的浏览器窗口，每个屏幕一个。 这可能吗？ 看来我真的必须将同一个应用程序加载到两个窗口中，并且不知何故让窗口相互通信。 我找不到如何实现这一目标的例子。 我怎样才能实现呢？

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

Answer 1

使用本地存储或（颤抖）cookie不需要凌乱的轮询基础设施。 假设这两个页面是从同一个域提供的，只要第一个窗口被第一个窗口打开，实现跨窗口通信就很简单了。

在您的主窗口中:( 单击此处获取JSFiddle演示，此处查看辅助页面的代码）

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是一个使用本地存储在Windows之间实现广播消息传递的库。 当数据发生更改时，本地存储会触发事件（ onstorage ），因此实际上不需要轮询。 内部通信允许域上的所有页面进行通信，无论它们是如何打开的。

Answer 2

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

对于脱机应用程序，如果它们位于同一个域，我假设它们将在本地，您可以使用本地存储甚至cookie，然后让应用程序轮询存储API的更改？

我最近一直在做离线本地存储的一些实验，我能够在本地维护windows与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 Dev昨天向我发誓当前离线本地存储工作正常，哦，好吧）。 您可以通过http://www.modernizr.com/在IE中使用它，但我还没有测试过。

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

问题描述

2 个解决方案

解决方案1
16 已采纳 2011-03-11 21:32:18

解决方案2
0 2011-03-11 19:53:33

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

问题描述

2 个解决方案

解决方案1 16 已采纳 2011-03-11 21:32:18

解决方案2 0 2011-03-11 19:53:33

解决方案1
16 已采纳 2011-03-11 21:32:18

解决方案2
0 2011-03-11 19:53:33