자바 스크립트; 원점이 같은 탭/창 사이의 통신 [복제

StackOverflow https://stackoverflow.com/questions/2236828

문제

이 질문은 이미 여기에 답이 있습니다.

두 개의 창문이 있습니다 : 창 A와 창 B가 있습니다.

  • 창 A와 창 b의 도메인이 동일합니다
  • 창 A와 창 b에는 상위 창이 없습니다.

질문:

  1. 창 A가 창 b의 참조를 얻을 수 있습니까?
  2. 창을 창에 알리는 가장 우아한 방법은 B에 무언가를 알리는 가장 우아한 방법은 무엇입니까?
    (새로운 HTML5 사양 포함)

이 작업을 알고있는 두 가지 방법 :

  • 서버에 의한 메시징 : Window B Regulary가 Window A가 무언가에 알림을 받았는지 서버에 묻습니다.
  • 로컬 데이터에 의한 메시징 (HTML5) : Window A가 무언가를 알리고 싶을 때 로컬 데이터를 변경하면 Window B Regulary는 로컬 데이터를 변경하여 변경 사항을 확인합니다.

그러나 두 가지 방법은 그렇게 우아하지 않습니다.
예를 들어 Window B를 참조하고 Window.postMessage () (html5)를 사용하는 것이 좋을 것입니다.

궁극적 인 목표는 Facebook과 같은 것을 만드는 것입니다. 4 개의 Facebook 탭을 열고 한 탭에서 채팅하면 모든 Facebook 탭에서 채팅이 최신 상태입니다.

도움이 되었습니까?

해결책

나는 사용을 사용하여 언급 된 공유 지역 데이터 솔루션을 고수하고 있습니다. localStorage. 신뢰성, 성능 및 브라우저 호환성 측면에서 최상의 솔루션 인 것 같습니다.

localStorage 모든 최신 브라우저에서 구현됩니다.

그만큼 storage 이벤트가 발생합니다 다른 탭은 변경합니다 localStorage. 이것은 의사 소통 목적으로 매우 편리합니다.

참조는 여기에서 찾을 수 있습니다.
Webstorage
Webstorage- 스토리지 이벤트

다른 팁

BroadcastChannel 표준을 사용하면이를 수행 할 수 있습니다. 지금은 Firefox 및 Chrome에서 구현되었습니다 (사용해도 되나요, MDN):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

SharedWorker는 탭간에 통신 할 수있는 일반적인 프로세스의 Whatwg/ Html5 사양입니다.

당신은 당신의 말 :

Utlimate 목표는 4 개의 Facebook 탭을 열고 한 탭에서 채팅하면 모든 Facebook 탭에서 채팅을 실현하는 Facebook과 같은 것을 만드는 것입니다.

이는 디자인의 부산물로 발생해야합니다. 크로스 뷰 커뮤니케이션에서 디자인하지 않고 채팅 업데이트를 위해 모델을 쿼리하는 뷰 (아마도 서버). 엄청난 양의 데이터를 전송하는 것이 아니라면 왜 걱정해야합니까? 큰 이익없이 물건을 복잡하게 할 것 같습니다.

몇 년 전에 나는 내가 그렇게했다면 그것을 발견했다 window.open 기존 창과 빈 URL의 이름을 사용하여 기존 창에 대한 참조를 얻었습니다 (이 동작은 MDC에 문서화 그리고에 대한 의견 MSDN 문서 IE에서도 작동한다고 제안합니다). 그러나 몇 년 전, 나는 오늘날의 세상에 대한 지원이 얼마나 보편적인지 모르겠으며, 물론 모든 창문이 이름을 지정하지 않으면 찾아야 할 창 이름이 없습니다. iframe 서버 측 코드를 통해 독창적으로 명명 된 다음 서버 측 코드를 통해 다른 창에 통신하는 통신의 경우 ... (무서운 생각 : 실제로 가능할 수 있습니다. 로그인과 관련된 "현재"창 이름을 저장 테이블에서, 그 계정에 로그인 한 새 창에 목록을 제공하고, 오래된 오래된 비활성 항목을 cull 기존 비활성화 항목으로 표시하십시오. 그러나 목록이 약간 구제되면 다른 사람을 검색 할 때 새 창을 열 수 있습니다 ... BET 지원은 브라우저에서 브라우저까지 IFFY입니다.)

다가오는 것 외에 공유 작업자, 당신은 또한 사용할 수 있습니다 신문 간 메시징, 훨씬 더 넓습니다 지원. 이 시나리오에서는 다른 모든 창을 window.open. 그러면 Child Windows가 사용할 수 있습니다 사후 관리 그들의 window.opener.

Flash를 사용하는 경우 옵션이라면 훨씬 오래된 것도 있습니다. 로컬 연결 Flash가 설치된 모든 클라이언트에서 사실상 지원됩니다 (예제 코드).

기타 폴백 방법 :
Window.location.href alling withing whoeld.location을위한 jQuery의 postmessage 플러그인.
비 강간 통신을위한 쿠키 기반 솔루션

Afaik, 동일한 부모가 없다면 Windows를 통해 의사 소통하는 것은 불가능합니다.

둘 다 부모 창에서 열린 경우 부모의 변수 참조를 유지할 수 있어야합니다.

부모에게는 다음과 같은 창문을 엽니 다.

childA = window.open(...);
childB = window.open(...)

Childa에서는 다음과 같은 아동에 액세스하십시오.

childB = window.opener.childA

그런 트릭을 수행하는 깔끔한 방법이 있지만 제한 사항이 있습니다. 도메인에 대한 팝업을 허용해야하며 Windows 간의 통신을 구현하는 한 페이지가 항상 탭 또는 팝업으로 열 수 있습니다.

예는 다음과 같습니다.http://test.gwpanel.org/test/page_one.html(도메인 용 팝업 활성화 후 페이지 새로 고침)

이 트릭의 주요 기능 - 팝업은 URL 조각 '#'로 열리고 있습니다.이 힘 브라우저는 창 위치를 변경하고 모든 데이터를 저장하지 않도록합니다. 그리고 Window.postMessage 나머지를 수행합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top