多個應用程序之間的通

Question

假設我在瀏覽器中運行了角度SPA（窗口1）。 並且說有一些活動導致我們在新窗口內啟動一個單獨的角度應用程序（由$window.open()打開）（窗口2）。

Windows 1和2希望保持一定的連接。 他們正在運行不同的應用程序，但他們都在處理相同的主題。 當一個人改變狀態時，另一個人可能需要對此做出反應。 反之亦然。

我正在為這兩個應用程序尋找一些好方法，在兩個獨立的瀏覽器窗口中來回發送事件。

現在，為了好玩，可能會有另一個窗口（窗口3）運行與窗口1相同的應用程序。這個單獨的實例不應該以任何方式受到窗口1和2的干擾。當然，窗口3可以啟動它自己的相當於窗口2（窗口4）。

所以Windows 1和2（運行不同的應用程序）應該能夠來回發送消息。 和Windows 3和4類似。 但是1不應該影響3和4，依此類推。

它們之間的明顯關系是窗口1稱為$window.open() ，窗口2可以訪問$window.opener - 所以它們都可以訪問window對象 - 但是我如何“對角度”這種情況呢？

當前的實現是使用$localStorage並觀察存儲事件以鏈接窗口1和2，但是當窗口3和4出現時，這當然完全失敗了非干擾要求。

Answer 1

這聽起來像是使用應用程序事件的好例子。

您將希望一個對象具有發布/訂閱接口：

var dispatcher = {
    subscriptions: {},

    publish: function(eventName, publisher, data) {
        // loop through subscribers and notify them, passing publisher and data
        // var subscriber = this.subscribers[eventName][i];
        // subscriber.callback.call(subscriber.context, publisher, data);
    },

    subscribe: function(eventName, context, callback) {
        this.subscriptions[eventName] = this.subscriptions[eventName] || [];
        this.subscriptions[eventName].push({
            context: context,
            callback: callback
        });
    }
};

打開新窗口時，請在新窗口中將此對象引用設置為屬性。

var win = window.open(...);
win.dispatcher = dispatcher;

現在每個窗口，包括“頂部”窗口都應該有一個名為dispatcher的全局變量，您可以使用它來訂閱和發布事件：

（從主窗口）

dispatcher.subcribe("item.added", this, function(publisher, data) {
    // "publisher" is the object publishing the event
    // "data" is arbitrary data passed along in the event
});

（來自子窗口）

dispatcher.publish("item.added", this, {
    name: "Foo"
});

我還沒有使用過AngularJS，所以我不確定它是否帶有DOM事件之外的某種事件框架。 在JavaScript中有很多pub / sub模型的實現，你可能會在Google搜索上投擲一個飛鏢並落在一個上。 我創建了一個簡單的JavaScript類庫，可能符合要求。 它沒有外部依賴： https ： //github.com/gburghardt/events

好處

• 執行得非常好，因為它不依賴於HTTP請求/響應生命周期
• 設置相當簡單
• 跨瀏覽器支持，無hacks或polyfill

缺點

• 如果主窗口關閉，那么您的子窗口將失去與外界的連接，發布的事件將被置若罔聞。

Answer 2

如果你足夠幸運，你的所有窗口都在同一個域上，那么你可以使用已經提到的postMessage ，甚至更好的HTML5 localStorage 。 您可以在此處獲得文章和演示。 主要是這里發生了什么：

所有窗口都會監聽存儲事件，例如：

window.addEventListener("storage", handle_storage, false); 

對於每個窗口，您可以使用不同的handle_storage函數或檢查哪個url負責存儲事件的常用函數。

好處 ：

• 沒有參考其他窗戶，
• 即使主窗口關閉也會工作，
• 標准和廣泛可用的IE8 +，FF3.5 +，Chrome4 +，
• “原生”Javascript沒有外部庫。 在Angular JS應用程序中輕松集成

缺點：

• 沒有（至少從我所知道的）

希望這會有所幫助。