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

원래 주소: HTML5의 window.postMessage API
온라인 예시: HTML5의 window.postMessage 사용(로그를 보려면 콘솔을 열어주세요)

I window.postMessage를 캡슐화하기 위해 MooTools 플러그인 "PostMessager"를 작성했습니다. 여기를 클릭하여 다운로드할 수 있습니다.

HTML5의 window.postMessage 인터페이스 API를 이해하는 사람은 많지 않습니다. window.postMessage를 사용하면 여러 창/프레임 간에 도메인 간 데이터 및 정보 전송이 가능합니다. 본질적으로 window.postMessage는 도메인 간 Ajax 요청 역할을 합니다. 물론 원격 서버가 협력할 필요는 없습니다. 다음으로 window.postMessage의 작동 원리와 FireFox, IE8, Opera, Safari, Chrome에서 사용하는 방법을 소개하겠습니다.

1. 메시지 전송 종료
전체 과정 첫 번째 단계는 '뉴스 매체'를 설정하는 것입니다. 이 메시지 소스를 통해 새로 열린 창(또는 iframe)에 창 수준 데이터(메시지)를 보낼 수 있습니다. 다음 예에서 새 창으로 메시지를 보내는 빈도는 6초마다 한 번씩이며, 대상 창에서 반환된 응답 정보를 처리하도록 이벤트 수신이 설정되어 있습니다.

코드 복사

코드는 다음과 같습니다.

함수 추적(메시지){
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에서 보낸 메시지를 수신할 수 있기 때문입니다. 그래야 여러 프레임과 상호 작용할 때 혼란을 겪지 않을 것입니다. 원본을 확인한 후 이 메시지를 처리하는 방법은 특정 비즈니스 및 요구 사항에 따라 다릅니다.

iframe을 사용하는 경우 코드는 다음과 같습니다.





코드를 복사하세요.

코드는 다음과 같습니다. // 또 다른 창을 생성합니다. (iframe,frame,frameset,top,window는 모두 창 관련 객체입니다.)

var domain = 'http://scriptandstyle.com ';

var iframe = document.getElementById('myIFrame').contentWindow;

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


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


2. 메시지 수신 종료

전체 과정의 두 번째 단계는 대상 창을 준비하는 것입니다. 대상 창에서 해야 할 일은 메시지 이벤트를 수신하고 이벤트의 원본 메시지 소스를 확인하는 것뿐입니다. 다시 알림: 메시지 이벤트 핸들러는 모든 도메인 이름에서 전송된 메시지를 수락할 수 있으므로 원본을 확인하고 신뢰 목록의 메시지만 처리하는 것이 매우 중요합니다.



코드 복사

코드는 다음과 같습니다.

// 수신된 정보를 모니터링합니다.
bindEvent(window,'message',function(event) {
// 특정 도메인의 메시지만 수신합니다
if(event.origin !== 'http://davidwalsh.name') return;
trace('청취한 정보: ',event.data)
//메시지 답장
event .source .postMessage(""안녕하세요, 친구 여러분, event.origin이라는 메시지를 받았습니다);
},false)

위의 예는 요청 사각형에 대한 응답 메시지입니다. .
message 이벤트의 중요한 속성은 다음과 같습니다.
source - 메시지를 보내는 창/iframe 개체
origin - 메시지를 보내는 창에 해당하는 URI(프로토콜, 도메인 및 포트인 경우) 지정)
데이터 - 특정 데이터 정보
이 세 가지 객체는 메시징 시스템 및 검증에 필수적입니다.

window.postMessage 사용 시 주의 사항
다른 모든 웹 기술과 마찬가지로 부적절하게 사용하면(이벤트 소스를 확인하지 않고) 위험이 명백합니다. 물론 보안은 귀하에게 달려 있습니다.
window.postMessage는 JavaScript 기술의 PHP와 매우 유사합니다(하하, 광고가 거의 없습니다!).window.postMessage는 매우 멋진 기술입니다. 어떻게 생각하시나요?