تقدم هذه المقالة الشرح التفصيلي لـ html5 postMessage لحل مشكلة الاتصال عبر النطاقات ومشاركتها مع الجميع، والتفاصيل هي كما يلي:
الاداءات
يوفر تحليل postmessage HTML5 آلية جديدة لـ PostMessage لتحقيق اتصال آمن عبر الأصل.otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: إشارة إلى النوافذ الأخرى، مثل خاصية contentWindow الخاصة بـ IFRAME، والتنفيذ، وكائن النافذة الذي يتم إرجاعه بواسطة رسالة window.open: البيانات التي سيتم إرسالها إلى النوافذ الأخرى targetOrigin: حدد النوافذ التي يمكنها تلقي أحداث الرسالة من خلال خاصية Origin النافذة، يمكن أن تكون قيمتها الحرف * (يشير إلى غير محدود) أو نقل URL: عبارة عن سلسلة من الكائنات القابلة للتحويل التي تم تمريرها في نفس الوقت الذي يتم فيه نقل ملكية هذه الكائنات إلى مستلم الرسالة. بمجرد الإرسال، لن يتم الاحتفاظ بالملكية بعد الآن element.addEventListener(event,fn,useCaption); يتم استخدام حدث حدث المعلمات الثلاثة مثل وظيفة رد الاتصال click mouseenter mouseleave useCaption لوصف ما إذا كان يتم التقاطه أم لا. القيمة الافتراضية خاطئة، مما يعني التسليم الفقاعي. عندما تكون القيمة صحيحة، يتم التقاطها وتمريرها. طريقة التنفيذ
الواجهة الرئيسية main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-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.backgroundColor=e.data; },خطأ) </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, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>المستند</title> <style type=text/css> html,body{ height:100% هامش:0px; } </style></head> <body style=height:100%;> <div id=frame style=height:200px width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> انقر لتغيير اللون</div> <script type=text/javascript> function ChangeColor(){ varframe = document.getElementById('frame'); var color=frame.style.backgroundColor if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; )' } console.log(frame====>,frame); window.parent.postMessage(color,'*'); } </script> </body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.