บทความนี้จะแนะนำคำอธิบายโดยละเอียดของ html5 postMessage เพื่อแก้ปัญหาการสื่อสารข้ามโดเมนและแบ่งปันให้กับทุกคน โดยมีรายละเอียดดังนี้
การเรนเดอร์
การแยกวิเคราะห์ข้อความ HTML5 ให้กลไกใหม่ PostMessage เพื่อให้เกิดการสื่อสารข้ามต้นทางที่ปลอดภัย ไวยากรณ์ otherWindow.postMessage(ข้อความ, targetOrigin, [ถ่ายโอน]);
otherWindow: การอ้างอิงถึงหน้าต่างอื่น เช่น คุณสมบัติ contentWindow ของ IFRAME, การดำเนินการ, วัตถุหน้าต่างที่ส่งคืนโดย window.open ข้อความ: ข้อมูลที่จะส่งไปยังหน้าต่างอื่น targetOrigin: ใช้คุณสมบัติต้นกำเนิดของหน้าต่างเพื่อระบุว่าหน้าต่างใดที่สามารถทำได้ รับเหตุการณ์ข้อความ ค่าของมันอาจเป็นอักขระ * (ระบุไม่จำกัด) หรือการถ่ายโอน URL: เป็นสตริงของวัตถุที่โอนได้ที่ส่งผ่านพร้อมกันกับข้อความ ความเป็นเจ้าของของวัตถุเหล่านี้จะถูกโอนไปยังผู้รับข้อความ เมื่อส่งไปแล้ว ความเป็นเจ้าของจะไม่คงอยู่อีกต่อไป element.addEventListener(event,fn,useCaption); เหตุการณ์พารามิเตอร์สามเหตุการณ์ เช่น click mouseenter mouseleave callback function useCaption ใช้เพื่ออธิบายว่ามันกำลังเดือดปุดๆ หรือกำลังจับภาพอยู่ ค่าเริ่มต้นคือเท็จ ซึ่งหมายถึงการจัดส่งแบบบับเบิล เมื่อค่าเป็นจริง มันจะถูกบันทึกและส่งผ่าน วิธีการนำไปปฏิบัติ
อินเทอร์เฟซหลัก main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>การเข้าถึงข้อมูลข้ามโดเมน</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.พื้นหลังสี=e.data; },false) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> ฉันเป็นอินเทอร์เฟซหลัก กำลังรอรับการนำส่ง iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html width=800px height=300px ></iframe> </div></body></html>อินเทอร์เฟซไอเฟรม
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>เอกสาร</title> <style type=text/css> html,body{ height:100%; } </style></head> <body style=height:100%;> <div id=frame style=height:200px; width:200px;สีพื้นหลัง:rgb(204, 204, 0) onclick=changeColor( )> คลิกเพื่อเปลี่ยนสี</div> <script type=text/javascript> function changeColor(){ var frame = document.getElementById('frame'); var color=frame.style.พื้นหลังสี; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; }else{ color='rgb(204,102,0 )'; } console.log(frame====>,frame); console.log(สี,สี); window.parent.postMessage(color,'*'); } </script> </body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network