여러 응용 프로그램 간의 통신

Question

각형 SPA가 브라우저 (창 1)에서 실행 중이라고합니다. 새로운 창 ($window.open()으로 개설) (창 2)에서 별도의 각도 응용 프로그램을 실행하는 몇 가지 활동이 있다고 가정 해보십시오.

Windows 1 & 2 다소 연결 상태를 유지하고 싶습니다. 그들은 다른 응용 프로그램을 실행하지만 그들은 모두 동일한 주제를 다루고 있습니다. 하나가 상태를 바꿀 때, 다른 하나는 그것에 반응해야 할 수도 있습니다. 그 반대.

두 개의 개별 브라우저 창에서 이벤트를주고받을 수있는 좋은 방법을 찾고 있습니다.

재미있게하려면 창 1과 동일한 응용 프로그램을 실행하는 다른 창 (창 3)이있을 수 있습니다.이 별개의 인스턴스는 어떤 방식 으로든 Windows 1 & 2와 간섭을받지 않습니다. 물론 창 3 창 2 (창 4)에 해당하는 프로그램을 시작할 수 있습니다.

그래서 windows 1 & (다른 응용 프로그램을 실행 중)은 앞뒤로 메시지를 보낼 수 있어야합니다. 그리고 마찬가지로 windows 3 & 4. 그러나 1은 3 & 4에 영향을 미치지 않아야합니다. 그래서 그들은 수 모두 액세스 window 객체 - -

은

그들 사이의 명백한 관계는 창 1 $window.open()라고 창 2 $window.opener에 액세스 할 수 있다는 것입니다하지만 어떻게이 상황까지 I "각-ISE"을합니까?

현재 구현 $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 
     }); 
    } 
}; 

새 창에서 속성으로이 객체 참조를 설정 새 창을 열면.

(기본 창에서)

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라는 전역 변수를 가져야한다 "최고"창을 포함하여 지금

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

각 창,

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

(하위 창에서)

나는 S, 아직 많이 AngularJS와 사용하지 않은 o DOM 이벤트 외부의 일종의 이벤트 프레임 워크가 제공되는지 확실하지 않습니다. 자바 스크립트에서 pub/sub 모델을 구현하는 경우가 많으며 Google 검색에서 다트를 던져 하나에 올릴 수 있습니다. 청구서에 맞는 간단한 자바 스크립트 클래스 라이브러리를 만들었습니다.는 HTTP 요청/응답 라이프 사이클에 의존하지 않는

• 수행합니다 아주 잘,
• 매우 간단
는
• 크로스 브라우저를 설정하는 https://github.com/gburghardt/events

  장점 : 그것은 외부 종속성이 없습니다 해킹 또는 폴리필이없는 지원

단점

• 메인 창이 닫히면 하위 창이 외부 세계와의 연결이 끊어지고 게시 된 이벤트가 귀가 먹을 것입니다. 당신이 동일한 도메인에 창을 모두 가질 정도로 운이 좋은 경우에

Answer 2

당신은 postMessage 이미 언급하거나 더 나은 HTML5 localStorage를 사용할 수 있습니다. 기사 및 데모를 here (으)로 사용할 수 있습니다. 주로 무슨 일이 일어나고 : 다른 handle_storage 기능 또는 URL이 저장에 대한 책임이 검사하는 일반적인 하나를 가질 수있는 모든 창을 위해

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

:

모든 창 같은 뭔가 스토리지 이벤트를 수신 행사.

장점 : 메인 윈도우가 닫혀있는 경우

도 작동합니다

• 다른 창에 대한 참조,
• 표준 및 널리 사용되는 IE8 +, Firefox 3.5 +, Chrome4 +,
• "기본"Javascript 외부 라이브러리가 없습니다. 당신의 각도 JS 응용 프로그램 내에서 쉽게 통합

단점 : (적어도 내가 아는 것과)

• 없음이 도움이 될 것입니다

희망.