我可以用一个HTML5应用程序控制两个浏览器窗口吗？ [英] Can I control two browser windows with one HTML5 app?

问题描述

我希望我的HTML5应用可以绘制到两个不同的屏幕上。这（我认为）意味着我需要两个不同的浏览器窗口，每个屏幕上一个。这可能吗？看来，我真的不得不将相同的应用程序加载到两个窗口，并以某种方式让窗口相互沟通。我找不到如何完成这个任务的例子。我该如何做到这一点？

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?

为了获得额外的好处：可能没有涉及服务器，只是从文件系统本地提供的应用程序。

For extra wonderfulness: There may not be a server involved, just an app served locally from the filesystem.

推荐答案

使用本地存储或（不寒而栗）cookies不需要混乱的轮询基础架构。假设这两个页面来自同一个域，那么只要第一个窗口打开，实现跨窗口通信是很简单的。

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 as the second window is opened by the first.

在您的主窗口中：（单击此处查看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 将引用第二页的窗口对象–换句话说，该页面的全局范围。您可以访问您在第二页中定义的所有函数和变量。

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. 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', ... });

在辅助窗口中，您可以通过<$ c $回调主窗口中的函数c> opener 属性，它将引用主窗口的窗口对象。 （这在JSFiddle演示中演示。）

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. (This is demonstrated in the JSFiddle demo.)

更新： Intercom 是一个使用本地存储实现窗口之间广播消息的库。当数据改变时，本地存储会触发事件（ onstorage ），因此实际上不需要轮询。内部通信允许域名上的所有页面进行通信，无论它们是如何打开的。

Update: Intercom is 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 all pages on a domain to communicate, regardless of how they were opened.

这篇关于我可以用一个HTML5应用程序控制两个浏览器窗口吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！