이전 기사에서는 브라우저의 상동 전략, 즉 서로의 방법과 속성이 서로의 페이지에 액세스하는 것을 막고 상동 전략의 교차 -도메인 문제에 대한 해결책에 대한 해결책을 설명하는 것, 즉 하위 도메인 대행사에 대해 이야기합니다. , JSONP, JSONP, CORS. 이 기사는 HTML5 Window.postMessage를 자세히 설명합니다.
html5 window.postmessage apihtml5 window.postmessage는 안전한 이벤트 기반 메시지 API입니다.
사후 관리자 보내기 메시지소스 창에서 메시지를 보내는 메시지를 보내야하는 소스 창에서 호출됩니다.
소스 창소스 창은 전역 창 객체 또는 다음 유형의 창일 수 있습니다.
문서 창의 iframe :
var iframe = document.getElementById ( 'my-iframe');
자바 스크립트 오픈 팝 -UP 창 :
var win = window.open ();
현재 문서 창의 아버지 창 :
var win = Window.parent;
현재 문서의 창을 엽니 다.
var win = window.opner ();
소스 창 객체를 찾은 후 PostMessage API를 호출하여 대상 창에 메시지를 보낼 수 있습니다.
``win.postmessage ( 'hello', 'ttp : //jhssdemo.duapp.com/'));```````````````````````````````````````````````````````````````
postmessage 함수는 두 개의 매개 변수를 수신합니다. 첫 번째는 전송 될 메시지이고, 두 번째는 소스 창의 소스입니다.
참고 : 대상 창의 소스가 PostMessage 함수에 전달 된 소스 매개 변수 값과 일치하는 경우에만 메시지를 수신 할 수 있습니다.
Message Postmessage 메시지를받습니다사후 관리를 통해 이전 소스 창에서 메시지를 받으려면 대상 창에 메시지 이벤트를 등록하고 이벤트 모니터링 함수를 바인딩하여 기능 매개 변수에서 메시지를 얻을 필요가 있습니다.
window () {var text.getElementById (e) {console.log! + e.origin); } if (wind ;}};메시지 이벤트 모니터링 함수는 세 가지 속성이있는 이벤트 객체 인스턴스 인 매개 변수를 수신합니다.
소스 창
<html lang = en> <head> <utf-8> <title> html5 #the hitth : width : 600px; # cccccc;} </style> </head> <body> <button id = btn> 열기 </button> <button id = send> send </button> <) -> <iframe src = http : // jhssdemo.duapp.com/demo/demo/h5_postmessage/win.html id = otherwin> </iframe> <br/> <br/> "<input type = button value = child.com id = sendmessage/> <cript> window.onload () {var btn = getElementById ( 'btn'); Window.open ( 'http : //jhssdemo.duapp .com/h5_postmessage/win.html', '팝업');} function sendit (e) {. // 데이터 보내기. getElementById (Otherwin) .ContentWindow .postMersage (OtherWin) d (메시지), http : //jhssdemo.duapp .com/);} function (e) {sendit (e) ;}; <<<script> </body> </html>대상 창 Win.html
<! ;} </style> </head> <body> <h1> 새 창 </h1> <div id = txt> </div> <cript> window.onload = {var text = document ( 'txt'); (norigin : + e.origin); 메시지 이벤트 및 모니터링 기능 창을 바인딩합니다. AddeventListener ( 'Message', Lickemsg, False) {wind " 검토이 기사의 연구를 통해 Message API를 사용하여 HTML5를 사용하여 Windows간에 통신하는 것에 대해 배웠습니다. IE7-와 같이 Window.Name, URL 쿼리 문자 및 해시 조각과 같은 데이터를 통신하는 특정 대안이 있습니다.
위는이 기사의 모든 내용입니다.