我可以使用一个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当数据发生更改时,本地存储会触发事件(),因此实际上不需要轮询.内部通信允许域上的所有页面进行通信,无论它们是如何打开的.