자바 스크립트;

자바 스크립트; 출처가 같은 탭 / 창 간의 통신

---

이 질문에 이미 답변이 있습니다.

• 탭 또는 창 간의 통신 9 답변

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

• 창 A와 창 B의 도메인이 동일합니다.
• 창 A와 창 B에는 부모 창이 없습니다.

질문 :

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

이 작업을 수행하는 두 가지 방법 :

• 서버 별 메시징 : 여기서 창 B는 창 A가 무언가를 알 렸는지 서버에 정기적으로 묻습니다.
• 로컬 데이터에 의한 메시징 (HTML5) : 창 A가 로컬 데이터를 변경하는 것을 알리고 자 할 때 창 B는 로컬 데이터의 변경 사항을 정기적으로 확인합니다.

그러나 두 가지 방법은 그렇게 우아하지 않습니다.
예를 들어 창 B에 대한 참조를 얻고 window.postMessage () (HTML5)를 사용하는 것이 좋습니다.

궁극적 인 목표는 4 개의 페이스 북 탭을 열고 하나의 탭에서 채팅하면 모든 페이스 북 탭에서 채팅이 최신 상태로 유지되는 페이스 북과 같은 것을 만드는 것입니다.

---

.NET을 사용하여 질문에서 언급 한 공유 로컬 데이터 솔루션을 고수하고 localStorage있습니다. 안정성, 성능 및 브라우저 호환성 측면에서 최고의 솔루션 인 것 같습니다.

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

storage이벤트가 발생하면 다른 탭은 변화한다 localStorage. 이것은 통신 목적으로 매우 편리합니다.

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

---

BroadcastChannel 표준은이를 가능하게합니다. 현재 Firefox 및 Chrome ( caniuse , 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 사양입니다.

---

당신은 다음과 같이 말했습니다.

궁극적 인 목표는 4 개의 페이스 북 탭을 열고 하나의 탭에서 채팅하면 모든 페이스 북 탭에서 채팅이 실현되는 페이스 북과 같은 것을 만드는 것입니다.

이는 디자인의 부산물로 발생해야합니다. 뷰는 크로스 뷰 커뮤니케이션에서 디자인 할 필요없이 채팅 업데이트를 위해 모델 (아마 서버)을 쿼리합니다. 방대한 양의 데이터를 전송하지 않는 한 왜 걱정할까요? 큰 이득없이 일을 복잡하게 만들 것 같습니다.

몇 년 전에 window.open기존 창 이름과 빈 URL을 사용하면 기존 창에 대한 참조를 얻었습니다 (이 동작은 MDC에 문서화 되어 있으며 MSDN 문서 에 대한 주석은 IE에서도 작동한다고 제안합니다. ). 그러나 그것은 몇 년 전이었고 오늘날 세계에서 지원이 얼마나 보편적인지 모르겠습니다. 물론 모든 창에 명명 된 이름이 포함되어 있지 않으면 찾을 창 이름이 없습니다.iframe통신을 위해, 서버 측 코드를 통해 고유하게 명명 된 다음 서버 측 코드를 통해 다른 창에 전달됩니다 ... (무서운 생각 : 실제로 가능할 수 있습니다. 로그 파일과 관련된 "현재"창 이름을 저장하십시오. 테이블의 계정에서 해당 계정에 로그인하여 생성 된 새 창에 목록을 제공하고 이전 비활성 항목을 제거합니다. 그러나 목록이 약간 오래된 경우 다른 창을 검색 할 때 새 창을 엽니 다. 내기 지원은 브라우저에서 브라우저로 불충분합니다.)

---

곧 출시 될 SharedWorker 외에도 훨씬 더 광범위하게 지원되는 문서 간 메시징을 사용할 수도 있습니다 . 이 시나리오에서는 다른 모든 창을 열어야하는 주 창이 있어야합니다 . 자식 창은 사용할 수 PostMessage를을 자신에 .window.openwindow.opener

플래시를 사용하는 것이 옵션이라면 플래시가 설치된 모든 클라이언트에서 가상으로 지원되는 훨씬 오래된 LocalConnection 도 있습니다 ( 예제 코드 ).

기타 대체 방법 :
window.location.href를 사용하는 jQuery 용 postMessage 플러그인 이전 브라우저의 경우 비순 시적
통신을위한 쿠키 기반 솔루션

---

AFAIK, 동일한 부모가 없으면 창간에 통신 할 수 없습니다.

둘 다 부모 창에서 연 경우 부모의 변수 참조를 가져올 수 있어야합니다.

부모에서 다음과 같이 창을 엽니 다.

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

ChildA에서 다음과 같이 childB에 액세스합니다.

childB = window.opener.childA

---

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

예 : http://test.gwpanel.org/test/page_one.html (도메인에 대한 팝업을 활성화 한 후 페이지 새로 고침)

이 트릭의 주요 기능은 마지막에 URL 조각 '#'로 팝업이 열리고 브라우저가 창 위치를 변경하지 않고 모든 데이터를 저장하도록 강제합니다. 나머지는 window.postMessage가 처리합니다.

참고URL : https://stackoverflow.com/questions/2236828/javascript-communication-between-tabs-windows-with-same-origin