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

Question

I'd like my HTML5 app to draw onto two different screens. 我希望我的HTML5应用程序能够绘制到两个不同的屏幕上。 This (I think) means that I need have two distinct browser windows, one on each screen. 这（我认为）意味着我需要两个不同的浏览器窗口，每个屏幕一个。 Is this possible? 这可能吗？ It seems that I'd really have to load the same app into two windows, and somehow have the windows communicate to each other. 看来我真的必须将同一个应用程序加载到两个窗口中，并且不知何故让窗口相互通信。 I couldn't find an example of how to accomplish this. 我找不到如何实现这一目标的例子。 How can I make it happen? 我怎样才能实现呢？

For extra wonderfulness: There may not be a server involved, just an app served locally from the filesystem. 为了更加精彩：可能没有涉及服务器，只是从文件系统本地提供的应用程序。

Answer 1

There's no need for a messy polling infrastructure using local storage or (shudder) cookies. 使用本地存储或（颤抖）cookie不需要凌乱的轮询基础设施。 Assuming the two pages are served from the same domain, it is trivial to implement cross-window communication so long as the second window is opened by the first. 假设这两个页面是从同一个域提供的，只要第一个窗口被第一个窗口打开，实现跨窗口通信就很简单了。

In your main window: ( click here for JSFiddle demo and here for the secondary page's code ) 在您的主窗口中:( 单击此处获取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;
    });
});

Once the secondary window has been opened by your main window, win2 will refer to the window object of the second page – in other words, the page's global scope. 一旦主窗口打开了辅助窗口， win2将引用第二页的window对象 - 换句话说，页面的全局范围。 You'll have access to all of the functions and variables you've defined in the second page. 您可以访问第二页中定义的所有函数和变量。

Thus, you can pass data through function calls. 因此，您可以通过函数调用传递数据。

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

From your secondary window, you can call back to functions in the main window through the opener property, which will refer to the window object of your main window. 在辅助窗口中，您可以通过opener属性回调主窗口中的函数，该属性将引用主窗口的window对象。 (This is demonstrated in the JSFiddle demo.) （这在JSFiddle演示中得到了证明。）

Update: Intercom is a library that uses local storage to implement broadcast messaging between windows. 更新： Intercom是一个使用本地存储在Windows之间实现广播消息传递的库。 Local storage fires an event ( onstorage ) when data changes, so polling is not actually necessary. 当数据发生更改时，本地存储会触发事件（ onstorage ），因此实际上不需要轮询。 Intercom allows all pages on a domain to communicate, regardless of how they were opened. 内部通信允许域上的所有页面进行通信，无论它们是如何打开的。

Answer 2

This is probably something that you could use websockets for, have each window send its info back to the app and then have them updated, but those are not supported across all browsers and in fact I believe are currently removed from most builds due to security issues with the spec. 这可能是你可以使用 websockets的东西，让每个窗口将其信息发送回应用程序，然后让它们更新，但是所有浏览器都不支持这些，事实上我认为由于安全问题，目前大多数构建都会删除它们与规范。

For offline apps if they were on the same domain, which I'm assuming they would be locally, you could use local storage or even cookies and then have the apps poll for changes to the storage api? 对于脱机应用程序，如果它们位于同一个域，我假设它们将在本地，您可以使用本地存储甚至cookie，然后让应用程序轮询存储API的更改？

I have been doing some experiments with offline local storage myself recently and I'm able to maintain state between windows with Chrome locally, in firefox this does not work, but I believe it is fixed in the FF4 RC 我最近一直在做离线本地存储的一些实验，我能够在本地维护windows与Chrome之间的状态，在Firefox中这不起作用，但我相信它已在FF4 RC中修复

Edit 2: 编辑2：

Slapped together a quick and dirty proof of concept in two files: 在两个文件中拼凑出快速而肮脏的概念证明：

Index 1: 指数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>

Index 2: 指数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>

Opening them both up in different windows in Chrome locally, the second one will display the state that is set by the loop in the first window. 在本地Chrome中的不同窗口中打开它们，第二个将显示第一个窗口中循环设置的状态。 Still not working in FireFox 4 I found (a Mozilla Dev swore to me yesterday that offline local storage works now, oh well). 我发现仍然没有在FireFox 4中工作（Mozilla Dev昨天向我发誓当前离线本地存储工作正常，哦，好吧）。 You can probably getting it working in IE via http://www.modernizr.com/ but I have yet to test that. 您可以通过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