주석 :이 기사는 HTML5 크로스 도메인 커뮤니케이션에서 사후 관리의 사용에 대한 자세한 요약을 제공합니다. 그것을 필요로하는 친구들은 와서 그것을 참조 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
postMessagePortal.html 페이지 코드
<! doctype html>
<title> 제목 </제목>
<link href = "styles.css">
<link href = "http://apress.com/favicon.ico">
<cript> </p> <p> var targetorigin = "http://22527.vhost20.boxcdn.cn"; </p> <p> var defaulttitle = "포털";
var notificationtimer = null; </p> <p> 함수 MessageHandler (e) {
if (e.origin == Targetorigin) {
알림 (e.Data);
} 또 다른 {
// 다른 기원에서 메시지를 무시합니다
}
} </p> <p> 함수 sendstring (s) {
document.getElementById ( "위젯"). contentWindow.postMessage (s, targetorigin);
} </p> <p>
함수 알림 (메시지) {
stopblinking ();
BlinkTitle (메시지, Defaultitle);
} </p> <p> 함수 stopBlinking () {
if (notificationtimer! == null) {
Cleartimeout (NotificationTimer);
}
문서 .Title = DefaultTitle;
} </p> <p> 함수 blinktitle (m1, m2) {
문서 .title = m1;
NotificationTimer = settimeout (Blinktitle, 1000, M2, M1)
} </p> <p> 함수 sendstatus () {
var statustext = document.getElementById ( "statustext"). 값;
sendstring (statustext);
} </p> <p> 함수 loadDemo () {
document.getElementById ( "SendButton"). addeventListener ( "클릭", sendstatus, true);
document.getElementById ( "stopbutton"). addeventListener ( "클릭", stopblinking, true);
sendstatus ();
}
window.addeventListener ( "로드", loaddemo, true);
wind
정보 전송 : <입력 유형 = "text"value = "온라인">
<버튼> 확인 </button>
<iframe src = "http://22527.vhost20.boxcdn.cn/postmessagewidget.html"> </iframe>
<p>
<버튼> 제목 깜박임 </button>을 중지하십시오
</p>
postMessageWidget.html 페이지의 코드
<! doctype html>
<title> 제목 </제목>
<link href = "styles.css">
<cript> </p> <p> var targetorigin = "http://www.weixiu0376.cn"; </p> <p> // todo whitelist array </p> <p> 함수 MessageHandler (e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ( "상태"). TextContent = e.Data;
} 또 다른 {
// 다른 기원에서 메시지를 무시합니다
}
} </p> <p> 함수 sendstring (s) {
window.top.postmessage (s, targetorigin);
} </p> <p> 함수 loadDemo () {
document.getElementById ( "ActionButton"). addeventListener ( "클릭",
기능() {
var messagetext = document.getElementById ( "messagetext"). 값;
sendstring (messagetext);
}, true); </p> <p>}
window.addeventListener ( "로드", loaddemo, true);
window.addeventListener ( "메시지", MessageHandler, True); </p> <p> </script>
<p> 리셉션 정보 표시 : <strong> </strong> <p>
<div>
<입력 유형 = "text"value = "메시지 내용을 채우십시오">
<버튼> 메시지 보내기 </button>
</div>