بسبب قيود المتصفح (سياسة الأصل من نفس) ، كانت قضية JavaScript عبر المجال المتقاطع مشكلة صعبة للغاية. يوفر HTML5 وظيفة نقل الرسائل المتقاطعة ، ويتلقى ويرسل المعلومات بين مستندات الويب. باستخدام هذه الوظيفة ، لا يمكن فقط التواصل مع صفحات الويب ذات نفس الأصل (رقم منفذ المجال +) مع بعضها البعض ، ولكن يمكن أيضًا الاتصال بمجال عبر اسم نطاق مختلفان.
يوفر الرسائل عبر المستند عبر المستند المتقاطع طريقة postmessage لتمرير البيانات بين مستندات الويب المختلفة ، ودعم المراسلة في الوقت الفعلي. ستدعم العديد من المتصفحات الآن هذه الميزة ، مثل Google Chrome 2.0+ ، و Internet Explorer 8.0+ ، و Firefox 3.0+ ، و Opera 9.6 ، ، Safari 4.0+ ، إلخ.
لذا ، ماذا علي أن أفعل إذا IE6 و IE7 والمتصفحات الأخرى التي لا تدعم HTML5؟
يمكنك استخدام طريقة window.name لأن تعديل window.name لا يتضمن مشكلات عبر المجال. على الرغم من أنها ليست مثالية بشكل خاص للاستخدام ، إلا أن التأثير مقبول.
ومع ذلك ، لا يمكننا كتابة window.postmessage ، window.addeventListener ، window.name وغيرها من المحتويات في كل مرة نشارك فيها في المجال المتقاطع.
تحقيقًا لهذه الغاية ، قمت بتجريد عملية النطاق عبر المجال بالكامل وقمت بتغليفها في مكون إضافي JavaScript لحل مشكلة المجال المتقاطع ثنائية الاتجاه ، وإدراك التواصل في الوقت الفعلي بين مستندات الويب المختلفة ، ويمكن أن تحقق التواصل بين المجال بين اسمين مختلف المجالين.
عنوان التنزيل التجريبي: http://xiazai.vevb.com/201501/other/jcrossdomain_v2
jcrossdomain javaScript
نسخة الكود كما يلي:
(وظيفة (فوز) {
/**
* لا توجد أشجار تزدهر
* 2013/12/07 17:12
*/
var _jcd = {
isinited: خطأ ،
elmt: خطأ ،
التجزئة: '' ،
delims: '،' ،
راند: وظيفة () {
العودة (تاريخ جديد) .getTime ()
} ،
msg: function () {
تنبيه ('تحذير: يجب أن تسمي وظيفة init في البداية') ؛
} ،
init: function (callback ، elmt) {
إذا (_jcd.isinited == صحيح)
يعود؛
_jcd.isinited = true ؛
_jcd.elmt = elmt ؛
if (win.postmessage) {
// يدعم المتصفح طريقة postmessage HTML5
if (win.adDeventListener) {
// يدعم المتصفحات مثل Firefox ، Google ، إلخ.
win.adDeventListener ("Message" ، Function (EV) {
callback.call (Win ، Ev.Data) ؛
}،خطأ شنيع)؛
} آخر إذا (win.attachevent) {
// دعم IE متصفح
win.attachevent ("onMessage" ، وظيفة (ev) {
callback.call (Win ، Ev.Data) ؛
}) ؛
}
_jcd.msg = دالة (البيانات) {
_jcd.elmt.postmessage (البيانات ، '*') ؛
}
}آخر{
// لا يدعم المتصفح طرق postmessage HTML5 ، مثل IE6 و 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name ؛
callback.call (win ، _jcd.hash.split (_jcd.delims) [1]) ؛
}
} ، 50) ؛
_jcd.msg = دالة (البيانات) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + data ؛
}
}
}
} ؛
var jcd = {
البداية: وظيفة (رد الاتصال ، iframeid) {
_jcd.init (callback ، document.getElementById (iframeid) .ContentWindow) ؛
} ،
initchild: وظيفة (رد الاتصال) {
_jcd.init (رد الاتصال ، win.parent) ؛
} ،
SendMessage: وظيفة (بيانات) {
_JCD.MSG (البيانات) ؛
}
} ؛
win.jcrossdomain = jcd ؛
}) (نافذة) ؛
طرق الاتصال في الصفحة الأصل:
نسخة الكود كما يلي:
// وظيفة رد الاتصال المخصص
var cb = function (msg) {
تنبيه ("الحصول على msg:" + msg) ؛
} ؛
// تهيئة ، وتحميل وظيفة رد الاتصال ومعرف iframe
jcrossdomain.initparent (CB ، 'iframea') ؛
// إرسال رسالة
jcrossdomain.sendmessage ('hello ، child') ؛
أساليب الاتصال في الصفحة الفرعية:
نسخة الكود كما يلي:
// وظيفة رد الاتصال المخصص
var cb = function (msg) {
تنبيه ("الحصول على msg:" + msg) ؛
} ؛
// تهيئة وظيفة رد الاتصال
jcrossdomain.initchild (CB) ؛
// إرسال رسالة
jcrossdomain.sendmessage ('hello ، parent') ؛
نصائح اختبار المحاكاة:
من أجل تحقيق التواصل بين المجالات المختلفة ، يمكن إضافة اسمين نطاقات إلى ملف المضيفين لنظام التشغيل للمحاكاة.
أضف اسمينًا مختلفًا لمجال إلى ملف المضيفين
127.0.0.1 Parent.com
127.0.0.1 Child.com
تطور المبرمجين: