عندما نقوم بالبرمجة، غالبًا ما نواجه المواقف التالية عبر المجالات:
1. تداخل إطارات iframe داخل الصفحة والمراسلة باستخدام إطارات iframe
2. نقل الرسائل بين الصفحات والصفحات المتعددة
استجابة لهذه المشكلات المزعجة عبر النطاقات، أطلق HTML5 خصيصًا ميزة جديدة لما بعد الرسالة (نقل الرسائل عبر المستندات). عند استخدام postMessage، تحتاج إلى تمرير معلمتين، البيانات و OriginUrl. تشير البيانات إلى المحتوى الذي يجب تمريره، ولكن بعض المتصفحات يمكنها فقط التعامل مع معلمات السلسلة، لذلك نقوم بشكل عام بإجراء تسلسل للبيانات، أي JSON.stringify()، ويشير OriginUrl إلى عنوان URL الهدف والنافذة المحددة.
فيما يلي مثال، أعتقد أنه سيكون من الأسهل على الجميع الفهم والكتابة.
1. إطار iframe متداخل داخل الصفحة
الصفحة الأم:
أتش تي أم أل:
<div id='parent'>مرحبًا كلمة postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
شبيبة:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) {console.log(e) document.getElementById('parent').style.color=e.data})الصفحة الفرعية:
أتش تي أم أل:
<div id='button' onclick='changeColor();' style=color:yellow>قبول المعلومات</div>
شبيبة:
window.addEventListener('message',function(e){ console.log(e) Let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});functionchangeColor(){ Let ButtonColor = document.getElementById('button').style.color ButtonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}تقوم الصفحة الأصلية بتمرير الرسائل إلى iframe من خلال طريقة postMessage، وتستمع الصفحة الفرعية إلى طريقة الرسالة من خلال window.addEventListener للحصول على القيمة التي تم تمريرها بواسطة الصفحة الأصلية. كما هو موضح في الشكل أدناه، البيانات هي القيمة التي تم تمريرها بواسطة الصفحة الرئيسية.
عندما تنقل الصفحة الفرعية رسائل إلى الصفحة الأصلية، فإنها تقوم أيضًا بتمرير الرسالة من خلال طريقة postMessage، بدلاً من تمرير القيمة من خلال window.parent.postMessage(data,url). تستمع الصفحة الأصلية أيضًا إلى حدث الرسالة عند الحصول على القيمة.
2. تمرير الرسائل بين صفحات متعددة
الصفحة الأم:
أتش تي أم أل:
<div id='parent' onclick=postMessage()>كلمة الترحيب postMessage</div>
شبيبة:
السماح للوالد = document.getElementById('parent')function postMessage(){ Let 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) }الصفحة الفرعية:
أتش تي أم أل:
<div id='button' onclick='changeColor();' style=color:#f00>قبول المعلومات</div>
شبيبة:
window.addEventListener('message',function(e){ console.log(e) });ترسل الصفحة الأصلية رسالة إلى الصفحة الفرعية لفتح صفحة أخرى من خلال window.open، ثم تمرر القيمة إليها. تجدر الإشارة إلى أنه عند استخدام postMessage لنقل القيم، تحتاج إلى استخدام setTimeout لتأخير تسليم الرسالة، لأن تحميل الصفحة الفرعية لا يكتمل مرة واحدة، مما يعني أن حدث الاستماع للصفحة الفرعية لم تبدأ بعد، ولا يمكن استلام القيمة في الوقت الحالي.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.