HTML5 PostMessage يحل حلول نقل الرسائل عبر الدوام

عادةً عند القيام بتطوير الويب ، هناك العديد من المشكلات التي يتم مواجهتها في كثير من الأحيان بالإضافة إلى العملاء ونقل الخادم.

1. نقل البيانات للصفحات ونوافذ جديدة مفتوحة

2. الرسائل بين النوافذ المتعددة

3. صفحة ونقل رسالة IFRAME المتداخلة

4. نقل البيانات عبر الدوامات من القضايا الثلاثة أعلاه

postmessage ()

تحتوي هذه المشكلات على بعض الحلول ، لكن واجهة برمجة تطبيقات الرسائل التي أدخلتها HTML5 يمكن أن تكون أكثر ملاءمة وفعالية وحلها بشكل آمن. تتيح طريقة postmessage () البرامج النصية من مصادر مختلفة استخدام طرق غير متزامنة للاتصالات المحدودة ، والتي يمكن أن تحقق ملفات النص المتقاطع ، والرسائل المتعددة ، والرسائل المتقاطعة.

تقبل طريقة postmessage (البيانات ، الأصل) معلمتين

1. البيانات: تم تمرير البيانات ، وذكرت مواصفات HTML5 أن المعلمة يمكن أن تكون أي نوع أساسي أو كائن قابل للتكرار من JavaScript ، ولكن لم يتم ذلك جميع المتصفحات. تحتاج إلى استخدام طريقة json.stringify () لتسلسل معلمة الكائن عند تمرير المعلمات.

2.RIGIN: تشير إلى مصدر النافذة الهدف ، بروتوكول+رقم منفذ [+عنوان URL] ، سيتم تجاهل عنوان URL ، حتى تتمكن من كتابته. فقط قم بتمرير الرسائل إلى النافذة المحددة. ل/.

http://test.com/index.html

 <النمط div = العرض: 200 بكسل ؛ src = http://lslib.com/lslib.html> </frame> </viv>

يمكننا تمرير الرسالة إلى صفحة Iframe المتقاطعة http: //lslib.html على المتقاطع -إذا كان http://test.com/index.html ينقل الرسائل

 window.onload = function () {window.frames [0] .postMessage ('getColor' ، 'http://lslib.com') ؛}

تلقي رسالة

أرسلت الصفحة أعلاه test.com رسالة إلى lslib.com ، كيف تتلقى الرسائل على صفحة lslib.com ، ومراقبة حدث رسالة رسالة Window.

http://lslib.com/lslib.html

 window.addeventListener ('message' ، function (e) {if ( خطأ شنيع؛

وبهذه الطريقة ، يمكننا تلقي الرسالة التي تم تمريرها بواسطة أي نافذة.

هناك عدة سمات مهمة

1. البيانات: كما يوحي الاسم ، إنها الرسالة التي يتم تمريرها

2. المؤرخ: كائن نافذة لإرسال الرسائل

3. الأطوار: مصدر إرسال نافذة رسالة (بروتوكول+مضيف+رقم منفذ)

وبهذه الطريقة ، يمكنك الحصول على رسائل متقاطعة.

عرض بسيط

في هذا المثال ، سيتغير DIV على اليسار وفقًا لتغيير لون Div في اليمين على اليمين

 <! <div id = color> لون الإطار </div> </viv> <viv> <iframe id = child src = http://lslib.com/lslib.html> </viv> </viv> <script type = text/javaScript> window.onload = function () {window.frames [0] .postMessage ('getColor' ، 'http://lslib.com') ؛} window.addd eventListener ('message' ، function (e) {var color = e.data ؛

 <! = حاوية onclick = changeColor () ؛ ) ؛ ؛} ، false) ؛ '؛} آخر {color =' rgb (204،102،0) '؛ .html

عندما يتم تحميل الصفحة في المثال ، ترسل الصفحة الرئيسية طلب "getColor" إلى iframe (المعلمات غير عملية)

 window.onload = function () {window.frames [0] .postMessage ('getColor' ، 'http://lslib.com') ؛}

يتلقى Iframe الرسالة وإرسال اللون الحالي إلى الصفحة الرئيسية

 window.addeventListener ('message' ، function (e) {if ( خطأ شنيع؛

تلقي الرسائل على الصفحة الرئيسية ، وقم بتغيير لون DIV الخاص بك

 window.addeventListener ('message' ، function (e) {var color =

عند النقر فوق iFrame Trigger طريقة تغيير اللون ، أرسل أحدث اللون إلى الصفحة الرئيسية

 وظيفة changeColor () RGB (204،102،0) '؛} container.style.backgroundColor = color

لا تزال الصفحة الرئيسية تستخدم البرنامج الذي استمع للتو إلى حدث الرسائل للتعامل مع تلونها الخاص

 window.addeventListener ('message' ، function (e) {var color =

في النهاية

الاستخدام البسيط يحل المشكلة الكبيرة. أصبح توافق المتصفح الذي يطلق عليه SO مشكلة تقريبًا. جوهر جوهر ومع ذلك ، فإن الأخبار السارة مثل LocalStorage. يحدد ما إذا كان سيتم دعم AddEventListener.

ما سبق هو كل محتويات هذا المقال.