في المقالة السابقة ، تتحدث عن الاستراتيجية المتماثلة للمتصفح ، أي منع أساليب وسمات بعضها البعض من الوصول إلى صفحات بعضها البعض ، وشرح حل الحل لمشاكل المتقاطع في الاستراتيجيات المتماثلة: وكالة Sub -Domain ، JSONP ، JSONP ، CORS. ستشرح هذا المقال بالتفصيل نافذة HTML5.
HTML5 Window.PostMessage APIHTML5 Window.PostMessage هي واجهة برمجة تطبيقات آمنة قائمة على الحدث.
بعد إرسال رسالة إرساليتم استدعاء طريقة postmessage في نافذة المصدر التي تحتاج إلى إرسال رسالة لإرسال رسالة.
نافذة المصدريمكن أن تكون نافذة المصدر كائن نافذة عالمي أو النوع التالي من النافذة:
iframe في نافذة المستند:
var iframe = document.getElementByid ('my-iframe') ؛JavaScript Open Pop -up Window:
var win = window.open () ؛
نافذة الأب لنافذة المستند الحالية:
var win = window.parent ؛
افتح نافذة المستند الحالي:
var win = window.opner () ؛
بعد العثور على كائن نافذة المصدر ، يمكنك استدعاء واجهة برمجة تطبيقات postmessage لإرسال رسالة إلى نافذة الهدف:
`` win.postmessage ('hello' ، 'ttp: //jhssdemo.duapp.com/') ؛ `` `` `` `` `` `` `` `` `` `` `` `` `` ``تستقبل وظيفة postmessage معلمتين: الأول هو الرسالة التي سيتم إرسالها ، والثاني هو مصدر نافذة المصدر.
ملاحظة: فقط عندما يتم مطابقة مصدر النافذة الهدف مع قيمة المعلمة المصدر التي تم تمريرها في وظيفة postmessage ، يمكن استلام الرسالة.
تلقي رسائل postmessageلتلقي الرسائل من نافذة المصدر السابقة من خلال postmessage ، تحتاج فقط إلى تسجيل حدث الرسالة في النافذة الهدف وربط وظيفة مراقبة الحدث للحصول على الرسالة في معلمة الوظيفة.
Window.onload = function () + E.origin) ؛ } if (window.adDeventListener) {// قم بتسجيل حدث الرسالة للنافذة ، وربط وظيفة المراقبة. ؛}} ؛تتلقى وظيفة مراقبة حدث الرسالة معلمة ، مثيل كائن الحدث ، والذي يحتوي على ثلاث سمات:
نافذة المصدر
<! # cccccc ؛} </style> </head> <body> <button id = btn> افتح </button> <button id = send> jhssdemo.duapp.com/demo/h5_postmessage/win.html id = otherwin> </frame> <br/> <br/> Window.onload = function () {var btn = document.getElementByid ('btn') ؛ نافذة من خلال window.pen ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html' ، 'popup') ؛ // إرسال data document.getElementById (otherwin) .ContentWindow .postmersage (otherwin) d (message). ؛} ؛الهدف نافذة win.html
<! ؛} </style> </head> <body> <h1> النافذة الجديدة </h1> <div id = txt> </viv> <script> window.onload = function () {var text = document (txt ') (Norigin: + E.origin) ؛ لحدث الرسائل وربط نافذة المراقبة " مراجعةمن خلال دراسة هذه المقالة ، تعلمت استخدام واجهة برمجة تطبيقات ما بعد Message لاستخدام HTML5 للتواصل بين النوافذ ، وأعلم أيضًا أنه يمكن استخدامها لتحقيق التواصل بين المجال ؛ مثل IE7- ، يمكنك استخدامه.
ما سبق هو كل محتويات هذا المقال.