我可以使用一個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 ），因此實際上不需要輪詢。 內部通信允許域上的所有頁面進行通信，無論它們是如何打開的。

Answer 2

這可能是你可以使用 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昨天向我發誓當前離線本地存儲工作正常，哦，好吧）。 您可以通過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