ความคิดเห็น: บทความนี้ให้ข้อมูลสรุปโดยละเอียดเกี่ยวกับการใช้งานของโพสต์เมสในการสื่อสารข้ามโดเมน HTML5 เพื่อนที่ต้องการมันสามารถมาและอ้างถึงมัน ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
รหัสหน้า postmessageportal.html
<! doctype html>
<title> ชื่อเรื่อง </title>
<link href = "styles.css">
<link href = "http://apress.com/favicon.ico">
<script> </p> <p> var targetorigin = "http://22527.vhost20.boxcdn.cn"; </p> <p> var defaultTitle = "พอร์ทัล";
var notificationTimer = null; </p> <p> function messagehandler (e) {
if (e.origin == targetorigin) {
แจ้ง (e.data);
} อื่น {
// ละเว้นข้อความจากต้นกำเนิดอื่น ๆ
-
} </p> <p> ฟังก์ชั่น sendstring (s) {
document.getElementById ("วิดเจ็ต"). ContentWindow.PostMessage (S, Targetorigin);
} </p> <p>
ฟังก์ชั่นแจ้งเตือน (ข้อความ) {
stopblinking ();
Blinktitle (ข้อความ, defaultTitle);
} </p> <p> ฟังก์ชั่น stopblinking () {
if (NotificationTimer! == null) {
ClearTimeOut (NotificationTimer);
-
document.title = defaultTitle;
} </p> <p> ฟังก์ชั่น blinktitle (m1, m2) {
document.title = m1;
NotificationTimer = settimeout (Blinktitle, 1,000, 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 ("คลิก", stopblink, true);
Sendstatus ();
-
window.addeventListener ("โหลด", loaddemo, true);
window.addeventListener ("ข้อความ", messagehandler, true); </p> <p> </script> </p> <p> <h1> การสื่อสารข้ามโดเมน </h1>
ส่งข้อมูล: <อินพุต type = "text" value = "online">
<button> ยืนยัน </button>
<iframe src = "http://22527.vhost20.boxcdn.cn/postmessagewidget.html"> </iframe>
<p>
<button> หยุดชื่อกระพริบ </utton>
</p>
รหัสของหน้า postmessageWidget.html
<! doctype html>
<title> ชื่อเรื่อง </title>
<link href = "styles.css">
<script> </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>
<อินพุต type = "text" value = "กรอกเนื้อหาข้อความ">
<button> ส่งข้อความ </ Button>
</div>