브라우저 창간에 이벤트 기반 통신이 가능합니까?

이벤트 기반의 브라우저 탭/창간에 통신이 가능합니까?브라우저 창간에 이벤트 기반 통신이 가능합니까?

을 사용하면 (적어도 이론적으로) 가능할 수 있음을 알았습니다. 코드를 작성하는 작은 예제를 제공해 주시겠습니까? 한 탭에서 이벤트를 보내고 다른 이벤트에서 수신하십시오.

라이브러리/jquery 플러그인이 있습니까?

(쿠키를 사용하여 동일한 브라우저의 창/탭간에 통신 할 수 있음을 알고 있지만 그게 내가 필요로하는 것이 아니며 이벤트 기반 접근 방식을 선호 할 때마다 쿠키 상태를 다시 확인하지 않으려합니다. 밀리 초).

2013-02-06 Igor Chubin

[postMessage] (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage)를 보시기 바랍니다. –

@ FabrícioMatté 나는 탭이 필요하기 때문에 탭으로는 작동하지 않을 것이라고 생각합니다. 창에 대한 참조 : https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage#Syntax – edhedges

Localstorage에는 다른 페이지와 동기화하기 위해 구독 할 수있는 이벤트가 있습니다.

참고 : http://html5demos.com/storage-events

: 당신이 창 (A)에 키 값을 업데이트하는 경우, 이벤트가 하지이 창 A에서 트리거됩니다 그것은 윈도우 B 트리거됩니다 & C.

는 데모입니다

이 페이지를 여러 탭으로 엽니 다. 입력 값을 변경하고 div에 반영되었는지 확인하십시오. 여기

는 자바 스크립트 코드입니다 :

var dataInput = document.getElementById('data'), 
output = document.getElementById('fromEvent'); 

// handle updates to the storage-event-test key in other windows 
addEvent(window, 'storage', function (event) { 
    if (event.key == 'storage-event-test') { 
    output.innerHTML = event.newValue; 
    } 
}); 

// Update the storage-event-test key when the value on the input is changed 
addEvent(dataInput, 'keyup', function() { 
    localStorage.setItem('storage-event-test', this.value); 
});

마크 업 :

<div> 
     <p>Your test data: <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this is only echoed on <em>other</em> windows)</small></p> 
     <p id="fromEvent">Waiting for data via <code>storage</code> event...</p> 
</div>

5 사양 이벤트에 전달되는 모든 정보에 대해 설명 html로 :에서

[Constructor(DOMString type, optional StorageEventInit eventInitDict)] 
interface StorageEvent : Event { 
    readonly attribute DOMString key; 
    readonly attribute DOMString? oldValue; 
    readonly attribute DOMString? newValue; 
    readonly attribute DOMString url; 
    readonly attribute Storage? storageArea; 
}; 

dictionary StorageEventInit : EventInit { 
    DOMString key; 
    DOMString? oldValue; 
    DOMString? newValue; 
    DOMString url; 
    Storage? storageArea; 
};

을 : http://www.w3.org/TR/webstorage/#the-storage-event

이 이벤트를 사용하면 로컬 저장소의 특정 키가 업데이트 될 때 다른 페이지가 반응하게 할 수 있습니다.

출처

2013-02-09 22:09:36