เมื่อเราเขียนโค้ด เรามักจะพบกับสถานการณ์ข้ามโดเมนต่อไปนี้:
1. การซ้อน iframe ภายในเพจและการส่งข้อความด้วย iframe
2. ถ่ายโอนข้อความระหว่างเพจและหลายเพจ
เพื่อตอบสนองต่อปัญหาข้ามโดเมนที่ยุ่งยากเหล่านี้ HTML5 ได้เปิดตัวฟีเจอร์ใหม่ postMessage (การส่งข้อความข้ามเอกสาร) เป็นพิเศษ เมื่อใช้ postMessage คุณจะต้องส่งพารามิเตอร์สองตัว ได้แก่ data และ originUrl ข้อมูลอ้างอิงถึงเนื้อหาที่ต้องส่งผ่าน แต่เบราว์เซอร์บางตัวสามารถจัดการได้เฉพาะพารามิเตอร์สตริงเท่านั้น ดังนั้น โดยทั่วไปเราจึงทำให้ข้อมูลเป็นอนุกรม ซึ่งก็คือ JSON.stringify() และ originUrl อ้างถึง URL เป้าหมายและหน้าต่างที่ระบุ
ด้านล่างนี้เป็นตัวอย่าง ฉันเชื่อว่าทุกคนจะเข้าใจและเขียนได้ง่ายขึ้น
1. iframe ที่ซ้อนกันภายในเพจ
หน้าหลัก:
HTML:
<div id='parent'>สวัสดี postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('ข้อความ',ฟังก์ชัน(e) { console.log(e) document.getElementById('parent').style.color=e.data})หน้าย่อย:
HTML:
<div id='button' onclick='changeColor();' style=color:yellow>ยอมรับข้อมูล</div>
js:
window.addEventListener('message',function(e){ console.log(e) ให้ color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});ฟังก์ชั่น changeColor(){ ให้ buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}หน้าหลักส่งข้อความไปยัง iframe ผ่านวิธี postMessage และหน้าลูกฟังวิธีข้อความผ่าน window.addEventListener เพื่อรับค่าที่ส่งผ่านโดยหน้าหลัก ดังแสดงในรูปด้านล่าง data คือค่าที่ส่งผ่านโดยเพจหลัก
เมื่อเพจย่อยส่งข้อความไปยังเพจหลัก ก็จะส่งข้อความผ่านเมธอด postMessage แทนการส่งข้อความผ่าน window.parent.postMessage(data,url) หน้าหลักยังฟังเหตุการณ์ข้อความเมื่อรับค่า
2. ส่งข้อความระหว่างหลายหน้า
หน้าหลัก:
HTML:
<div id='parent' onclick=postMessage()>สวัสดี postMessage</div>
js:
ให้ parent = document.getElementById('parent')function postMessage(){ la windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }หน้าย่อย:
HTML:
<div id='button' onclick='changeColor();' style=color:#f00>ยอมรับข้อมูล</div>
js:
window.addEventListener('ข้อความ',ฟังก์ชั่น(e){ console.log(e) });เพจหลักส่งข้อความไปยังเพจย่อยเพื่อเปิดเพจอื่นผ่าน window.open แล้วส่งผ่านค่าไป ควรสังเกตว่าเมื่อใช้ postMessage เพื่อถ่ายโอนค่า คุณต้องใช้ setTimeout เพื่อชะลอการส่งข้อความ เนื่องจากการโหลดเพจย่อยไม่เสร็จสมบูรณ์ในครั้งเดียว ซึ่งหมายความว่าเหตุการณ์การฟังของเพจย่อย ยังไม่ได้เริ่ม และตอนนี้ค่าก็ผ่านไปแล้ว ไม่สามารถรับได้
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network