โดยปกติเมื่อทำการพัฒนาเว็บมีปัญหาหลายประการที่มักพบนอกเหนือจากลูกค้าและการส่งเซิร์ฟเวอร์
1. การส่งข้อมูลของหน้าเว็บและหน้าต่างใหม่ที่เปิดขึ้น
2. ข้อความระหว่างหลายหน้าต่าง
3. หน้าและการส่งข้อความ IFRAME ซ้อนกัน
4. การส่งข้อมูลข้ามโดเมนของสามประเด็นข้างต้น
postmessage ()ปัญหาเหล่านี้มีวิธีแก้ปัญหาบางอย่าง แต่ข้อความ API ที่แนะนำโดย HTML5 สามารถสะดวกมากขึ้นมีประสิทธิภาพและแก้ไขได้อย่างปลอดภัย วิธีการ postmessage () ช่วยให้สคริปต์จากแหล่งต่าง ๆ ใช้วิธีการแบบอะซิงโครนัสสำหรับการสื่อสารที่ จำกัด ซึ่งสามารถรับรู้ไฟล์ข้ามข้อความหลาย window และข้อความข้ามโดเมน
เมธอด postmessage (ข้อมูลต้นกำเนิด) ยอมรับพารามิเตอร์สองตัว
1. ข้อมูล: ข้อมูลที่จะส่งผ่านข้อกำหนด HTML5 กล่าวว่าพารามิเตอร์สามารถเป็นประเภทพื้นฐานหรือวัตถุที่จำลองได้ของ JavaScript แต่เบราว์เซอร์ทั้งหมดไม่ได้ทำสิ่งนี้ จำเป็นต้องใช้เมธอด json.stringify () เพื่อทำให้เป็นอนุกรมพารามิเตอร์วัตถุเมื่อผ่านพารามิเตอร์ 2.Origin: พารามิเตอร์สตริงระบุแหล่งที่มาของหน้าต่างเป้าหมายโปรโตคอล+โฮสต์+หมายเลขพอร์ต [+url] URL จะถูกละเว้นดังนั้นคุณสามารถเขียนได้ ทำให้ข้อความส่งผ่านไปยังหน้าต่างที่ระบุแน่นอน ถึง/.http://test.com/index.html
<div style = ความกว้าง: 200px; src = http://lslib.com/lslib.html> </iframe> </div>
เราสามารถส่งข้อความไปยังครอส -โดเมน iframe หน้า http: //lslib.html บน cross -domain ถ้า http://test.com/index.html ส่งข้อความ
window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} รับข้อความหน้า test.com ส่งข้อความไปยัง LSLIB.com ดังนั้นวิธีรับข้อความในหน้า LSLIB.com และตรวจสอบเหตุการณ์ข้อความของเหตุการณ์ข้อความของหน้าต่าง
http://lslib.com/lslib.html
window.addeventListener ('ข้อความ', ฟังก์ชั่น (e) {ถ้า (e.source! = window.parent) return; var color = container.style.style.backgroundcolor; window.parent. postmessage (สี, '*');}, เท็จ;ด้วยวิธีนี้เราสามารถรับข้อความที่ส่งผ่านโดยหน้าต่างใด ๆ
มีคุณลักษณะที่สำคัญหลายประการ
1. ข้อมูล: ตามชื่อแนะนำมันเป็นข้อความที่ส่งผ่าน 2.Source: วัตถุหน้าต่างเพื่อส่งข้อความ 3.Origin: แหล่งที่มาของการส่งหน้าต่างข้อความ (โปรโตคอล+โฮสต์+หมายเลขพอร์ต)ด้วยวิธีนี้คุณสามารถรับข้อความข้ามโดเมนได้
ตัวอย่างง่ายๆในตัวอย่างนี้ div ทางด้านซ้ายจะเปลี่ยนไปตามการเปลี่ยนสีของ div ทางด้านขวาทางด้านขวา
<! <div id = สี> สีเฟรม </div> </div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </div> <script type = text/javascript> window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} window.addd eventlistener ('ข้อความ', ฟังก์ชัน (e) {var color = e.data; <! = คอนเทนเนอร์ onclick = changecolor (); ); window.addeventListener ('ข้อความ', ฟังก์ชั่น (e) {ถ้า (E.Source! ;}, false); function changecolor () {var color = control.backgroundColor; ';} else {color =' rgb (204,102,0) ';} container.style.backgroundcolor = color; .htmlเมื่อหน้าถูกโหลดในตัวอย่างหน้าแรกจะส่งคำขอ 'getColor' ไปยัง iframe (พารามิเตอร์ไม่สามารถใช้งานได้)
window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');}iframe ได้รับข้อความและส่งสีปัจจุบันไปยังหน้าหลัก
window.addeventListener ('ข้อความ', ฟังก์ชั่น (e) {ถ้า (e.source! = window.parent) return; var color = container.style.style.backgroundcolor; window.parent. postmessage (สี, '*');}, เท็จ;รับข้อความในหน้าแรกเปลี่ยนสีของคุณเอง
window.addeventListener ('ข้อความ', ฟังก์ชั่น (e) {var color = e.data; document.getElementById ('color'). style.backgroundColor = color;);เมื่อคลิก iframe ทริกเกอร์วิธีการเปลี่ยนสีให้ส่งสีล่าสุดไปยังหน้าหลัก
ฟังก์ชั่น changecolor () {var color = container.style.backgroundcolor; rgb (204,102,0) ';} container.style.backgroundcolor = color.winder.parent.postmessage (สี,'*');}หน้าแรกยังคงใช้โปรแกรมที่เพิ่งฟังเหตุการณ์ข้อความเพื่อจัดการการเปลี่ยนสีของตัวเอง
window.addeventListener ('ข้อความ', ฟังก์ชั่น (e) {var color = e.data; document.getElementById ('color'). style.backgroundColor = color;); ในที่สุดการใช้งานง่าย ๆ แก้ปัญหาใหญ่ ความเข้ากันได้ของเบราว์เซอร์ที่เรียกว่าเกือบจะกลายเป็นปัญหาที่ IE เริ่มต้นขึ้น แก่นแท้ แก่นแท้ อย่างไรก็ตามข่าวดีก็เหมือนกับ LocalStorage กำหนดว่าจะสนับสนุน addeventListener หรือไม่
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้