javascript 我可以用一个 HTML5 应用程序控制两个浏览器窗口吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5277482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I control two browser windows with one HTML5 app?
提问by Ned Batchelder
I'd like my HTML5 app to draw onto two different screens. 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?
我希望我的 HTML5 应用程序可以在两个不同的屏幕上进行绘制。这（我认为）意味着我需要有两个不同的浏览器窗口，每个屏幕一个。这可能吗？看来我真的必须将同一个应用程序加载到两个窗口中，并以某种方式让这些窗口相互通信。我找不到如何完成此操作的示例。我怎样才能让它发生？
For extra wonderfulness: There may not be a server involved, just an app served locally from the filesystem.
额外的精彩：可能不涉及服务器，只是从文件系统本地提供的应用程序。
回答by josh3736
There's no need for a messy polling infrastructure using local storage or (shudder) cookies. Assuming the two pages are served from the same domain, it is trivial to implement cross-window communication so long asthe second window is opened by the first.
不需要使用本地存储或（颤抖）cookie 的凌乱的轮询基础设施。假设两个页面来自同一个域，只要第二个窗口被第一个打开，实现跨窗口通信就很简单。
In your main window:(click here for JSFiddle demoand 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, win2will refer to the windowobject of the second page – in other words, the page's global scope. You'll have access to all of the functions and variables you've defined in the second page.
一旦主窗口打开辅助窗口，win2将引用window第二页的对象——换句话说，页面的全局范围。您将可以访问在第二页中定义的所有函数和变量。
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 openerproperty, which will refer to the windowobject of your main window. (This is demonstrated in the JSFiddle demo.)
从您的辅助窗口，您可以通过opener属性回调主窗口中的函数，该属性将引用window您的主窗口的对象。（这在 JSFiddle 演示中进行了演示。）
Update:Intercomis a library that uses local storage to implement broadcast messaging between windows. Local storage fires an event (onstorage) when data changes, so polling is not actually necessary. Intercom allows allpages on a domain to communicate, regardless of how they were opened.
更新：Intercom是一个库，它使用本地存储来实现窗口之间的广播消息传递。本地存储会onstorage在数据更改时触发事件 ( )，因此实际上不需要轮询。Intercom 允许域中的所有页面进行通信，无论它们是如何打开的。
回答by Graham Conzett
This is probably something that you could use websocketsfor, 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
我最近自己一直在做一些离线本地存储的实验，我能够在本地使用 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. Still not working in FireFox 4 I found (a Mozilla Dev swore to me yesterday that offline local storage works now, oh well). You can probably getting it working in IE via http://www.modernizr.com/but I have yet to test that.
在本地 Chrome 的不同窗口中打开它们，第二个将在第一个窗口中显示循环设置的状态。我发现仍然不能在 FireFox 4 中工作（昨天 Mozilla 开发人员向我发誓说离线本地存储现在可以工作了，哦，好吧）。您可能可以通过http://www.modernizr.com/在 IE 中使用它，但我还没有测试过。
