我希望我的HTML5应用程序能够绘制到两个不同的屏幕上。这(我认为)意味着我需要两个不同的浏览器窗口,每个屏幕一个。这可能吗?看来我真的必须将同一个应用程序加载到两个窗口中,并且不知何故让窗口相互通信。我找不到如何实现这一目标的例子。我怎样才能实现呢?
额外的精彩:可能没有涉及服务器,只是从文件系统本地提供的应用程序。
我希望我的HTML5应用程序能够绘制到两个不同的屏幕上。这(我认为)意味着我需要两个不同的浏览器窗口,每个屏幕一个。这可能吗?看来我真的必须将同一个应用程序加载到两个窗口中,并且不知何故让窗口相互通信。我找不到如何实现这一目标的例子。我怎样才能实现呢?
额外的精彩:可能没有涉及服务器,只是从文件系统本地提供的应用程序。
使用本地存储或(颤抖)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演示中得到了证明。)
更新: 对讲 是一个使用本地存储在Windows之间实现广播消息传递的库。本地存储会触发事件(onstorage
)当数据发生变化时,实际上不需要轮询。对讲允许 所有 域上的页面进行通信,无论它们是如何打开的。
这可能是您可以使用的东西 的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昨天向我发誓当前离线本地存储工作正常,哦,好吧)。您可以通过IE在IE中工作 http://www.modernizr.com/ 但我还没有测试过。