لقد واجهت مؤخرًا حاجة في العمل. السيناريو هو: تم تضمين صفحة h5 في صفحة الكمبيوتر كوحدة معاينة. يمكن للمستخدم إجراء بعض العمليات على صفحة الكمبيوتر، ثم تقوم صفحة h5 بإجراء تغييرات سريعة لتحقيق تأثير المعاينة .
أول ما يتبادر إلى الذهن هنا هو تضمين صفحة h5 في صفحة الويب الخاصة بجهاز الكمبيوتر باستخدام iframe، ثم يرسل الكمبيوتر البيانات المتغيرة إلى iframe من خلال طريقة postMessage، ويتلقى h5 المضمن في iframe البيانات من خلال addEventListener ، ثم يقوم بإجراء تغييرات سريعة الاستجابة على البيانات.
فيما يلي ملخص لاستخدام واجهة برمجة التطبيقات postMessage البسيطة جدًا:
otherWindow.postMessage(message, targetOrigin, [transfer]);
يعد otherWindow مرجعًا للنافذة المستهدفة، وهي iframe.contentWindow في السيناريو الحالي؛
message هي الرسالة المرسلة قبل Gecko 6.0، يجب أن تكون الرسالة عبارة عن سلسلة، ولكن يمكن للإصدارات الأحدث إرسال الكائن مباشرة دون إجراء تسلسل له بنفسك؛
يمثل targetOrigin أصل النافذة المستهدفة، ويمكن أن تكون قيمتها سلسلة * (تشير إلى غير محدود) أو URI. عند إرسال رسالة، إذا كان أي من البروتوكولات أو عنوان المضيف أو منفذ النافذة المستهدفة لا يتطابق مع القيمة المقدمة من targetOrigin، فلن يتم إرسال الرسالة إلا إذا كانت الثلاثة متطابقة تمامًا، فسيتم إرسال الرسالة. بالنسبة للبيانات السرية، من المهم جدًا تحديد أصل النافذة المستهدفة؛
عند استدعاء postMessage()، يتم إرسال حدث رسالة إلى النافذة المستهدفة. تحتوي هذه الواجهة على حدث رسالة، والذي له عدة خصائص مهمة:
1. البيانات: كما يوحي الاسم، فهي الرسالة التي تم تمريرها
2.source: كائن النافذة الذي يرسل الرسالة
3.Origin: مصدر نافذة الرسالة (البروتوكول + المضيف + رقم المنفذ)
بهذه الطريقة، يمكننا تلقي رسائل عبر النطاقات، ويمكننا أيضًا إرسال الرسائل مرة أخرى بطريقة مماثلة.
نقل المعلمة الاختياري عبارة عن سلسلة من الكائنات القابلة للتحويل التي يتم تمريرها مع الرسالة. سيتم نقل ملكية هذه الكائنات إلى متلقي الرسالة، ولن يحتفظ المرسل بالملكية بعد الآن.
وبعد ذلك، عند تهيئة iframe ، يمكنك الحصول على المرجع إلى iframe وإرسال الرسالة من خلال الكود التالي:
// لاحظ أن هذا لا يهدف إلى الحصول على مرجع dom لإطار iframe، بل مرجع نافذة iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello World', 'http:/ /yourhost.com' );في إطار iframe، يمكن استلام الرسالة من خلال الكود التالي.
window.addEventListener('message', msgHandler, false);عند الاستلام، يمكنك تصفية أصل الرسالة حسب الحاجة لتجنب هجمات XSS الناتجة عن تلقي رسائل بأسماء نطاقات غير قانونية.
أخيرًا، لإعادة استخدام الكود، يتم تغليف إرسال واستقبال الرسائل في فئة، ويتم محاكاة واجهة برمجة التطبيقات لنوع الرسالة، وهو أمر مناسب جدًا للاستخدام. الكود المحدد هو كما يلي:
تصدير فئة الرسائل الافتراضية {structor(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; this.actions = {}; window.addEventListener('message', this.handleMessageListener, false } HandleMessageListener =event => { if (!event.data || !event.data.type) { return } const type = events.data.type if (!this.actions[type]) { return console.warn(`${type}: Missinglister`); } this.actions[type](event.data.value); } on = (type, cb) = > { this.actions[type] = cb; return this; window.removeEventListener('message', this.handleMessageListener }});ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.