HTML5 창/iframe 교차 도메인 메시징 API 소개_html5 튜토리얼 기술

함수 추적(메시지){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos); } else {
alert(infos);
}
};
// 팝업 창 만들기
var domain = 'http://scriptandstyle.com'; var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow')
//정기적으로 메시지 보내기
setInterval(function(){
var message = '지금 시간:' (new Date().getTime( ));
trace('데이터 소스. 전송된 메시지: ' message)
myPopup.postMessage(message,domain); //데이터 정보 전송 및 대상 URI 설정
},6*1000 );
function binEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler)
} else if(window .attachEvent){
// IE의 청취 설정 기능은 attachmentEvent
target.attachEvent("on" noOnEventName,handler)
} else {
target["on" noOnEventName]=handler ;
}
};
// 수신된 정보를 모니터링합니다.
bindEvent(window,'message',function(event) {
// 특정 도메인의 메시지만 수신합니다
if(event.origin !== 'http://scriptandstyle.com') return;
trace('수신된 응답 정보: ',event.data)
},false); 🎜>
원본 기사의 작성자는 이벤트를 바인딩하기 위해 window.addEventListener 메서드를 사용하지만 IE에서는 오류가 보고됩니다(IE는 window.attachEvent). 물론 이벤트를 래핑하는 함수를 만들 수도 있습니다. 또는 MooTools 또는 jQuery/dojo와 같은 이미 만들어진 클래스 라이브러리를 사용하여 달성할 수 있습니다.
위의 예에서 새 창이 정상적으로 열리면 창 개체 참조 myPopup을 통해 메시지를 보내고 일치해야 하는 URI(프로토콜, 호스트 이름, 포트 번호)를 지정할 수 있습니다(사용자가 자식 창에서 점프하는 경우). 창을 다른 페이지로 이동하면 메시지가 전송되지 않습니다.
마찬가지로 메시지를 수신하도록 이벤트 핸들러 함수도 바인딩했습니다. 다시 한번 말씀드리지만, 메시지 이벤트의 출처 속성을 확인하는 것이 중요합니다. 왜냐하면 모든 URI에서 보낸 메시지를 수신할 수 있기 때문입니다. 그래야 여러 프레임과 상호 작용할 때 혼란을 겪지 않을 것입니다. 원본을 확인한 후 이 메시지를 처리하는 방법은 특정 비즈니스 및 요구 사항에 따라 다릅니다.

// 루프에서 메시지를 보내는 방법도 사용할 수 있습니다. . .
setInterval(function(){
var message = '현재 시간: ' (new Date().getTime());
trace('데이터 소스.메시지 전송됨: ' message);
iframe.postMessage(message,domain); //데이터 정보 전송 및 대상 URI 설정


iframe 객체의 contentWindow 속성에 액세스할 수 있는지 확인하세요. —— iframe 객체뿐만이 아닙니다.


2. 메시지 수신 종료