JavaScript هي تقنية نصية ديناميكية في الواجهة الأمامية والتي غالباً ما تستخدم في تطوير الويب. في JavaScript ، هناك قيود أمنية مهمة للغاية بعنوان "سياسة الأصل من نفس". تضع هذه الاستراتيجية قيودًا مهمة على محتوى الصفحة الذي يمكن أن يصل إليه رمز JavaScript ، أي أن JavaScript لا يمكنه الوصول إلا إلى المحتوى ضمن نفس المجال الذي يحتوي عليه المستند.
JavaScript هي استراتيجية أمنية ذات أهمية خاصة عند برمجة الإفطار المتعدد أو النوافذ المتعددة و Ajax. وفقًا لهذه الاستراتيجية ، لا يمكن لرمز JavaScript الوارد في الصفحة ضمن Baidu.com الوصول إلى محتوى الصفحة تحت اسم مجال Google.com ؛ لا يمكن الوصول إلى الصفحات بين النطاقات الفرعية المختلفة من قبل بعضها البعض من خلال رمز JavaScript. التأثير على AJAX هو أن طلبات AJAX التي تم تنفيذها من خلال XMLHTTPREQUEST لا يمكنها تقديم الطلبات إلى مجالات مختلفة. على سبيل المثال ، لا يمكن للصفحات الموجودة بموجب ABC.Example.com إرسال طلبات AJAX إلى def.example.com ، إلخ.
ومع ذلك ، عند أداء بعض البرمجة الأمامية المتعمقة ، تكون عمليات النطاق المتقاطع مطلوبة حتماً ، ويبدو أن "استراتيجية الأصل من نفس" صعبة للغاية. تلخص هذه المقالة بعض التقنيات المطلوبة عبر المجال حول هذه المسألة.
أدناه نناقش تقنيات النطاق عبر المجال في حالتين: ناقش أولاً تقنيات المجال المتقاطع في مختلف النطاق الفرعي ، ثم ناقش تقنيات المجال المتقاطع في المجالات المختلفة تمامًا.
(ط) تقنية النطاقات عبر المجالات المختلفة.
نناقشها بشكل منفصل في سؤالين: السؤال الأول هو كيفية إجراء مكالمات JavaScript عبر نطاقات فرعية مختلفة ؛ والسؤال الثاني هو كيفية إرسال طلبات AJAX إلى نادي فرعي مختلف.
دعنا نحل المشكلة الأولى أولاً ، على افتراض أن هناك نطاقان فرعيتان مختلفتان ضمن مجال example.com: ABC.Example.com و def.example.com. افترض الآن أن هناك صفحة ضمن def.example.com تحدد وظيفة JavaScript:
نسخة الكود كما يلي:
وظيفة funcindef () {
.....
}
نريد الاتصال بالوظيفة أعلاه في صفحة تحت ABC.Example.com. لنفترض أن الصفحة أدناه ABC.Example.com التي نناقشها مضمنة في الصفحة أدناه def.example.com في شكل iframe ، لذلك قد نحاول إجراء المكالمات التالية في iframe:
نسخة الكود كما يلي:
window.top.funcindef () ؛
حسنًا ، لاحظنا أن هذه الدعوة محظورة من خلال "سياسة الأصل من نفس" المذكورة سابقًا ، وسيقوم محرك JavaScript بإلقاء استثناء مباشرة.
من أجل تنفيذ المكالمة أعلاه ، يمكننا القيام بذلك عن طريق تعديل سمة المجال للصفحتين. على سبيل المثال ، يمكننا إضافة مقتطف JavaScript Code التالي في الجزء العلوي من كلتا الصفحتين ضمن ABC.Example.com و Def.Example.com:
نسخة الكود كما يلي:
<script type = "text/javaScript">
document.domain = "example.com" ؛
</script>
وبهذه الطريقة ، تصبح الصفحتان نفس المجال ، ويمكن تنفيذ المكالمات السابقة بشكل طبيعي.
شيء واحد يجب ملاحظته هنا هو أنه لا يمكن تعيين خاصية PODOMAIN الخاصة بالصفحة إلا على اسم مجال أكثر مستوى (باستثناء اسم المجال من المستوى الأول) ، ولكن لا يمكن ضبطه على اسم نطاق فرعي أعمق من اسم المجال الحالي. على سبيل المثال ، يمكن لصفحة ABC.Example.com تعيين نطاقها فقط على example.com ، ولا يمكن تعيينها على subc.abc.example.com ، وبالطبع لا يمكن تعيينها على اسم المجال من المستوى الأول.
يناقش المثال أعلاه الموقف الذي تنتمي فيه صفحتان إلى العلاقات المتداخلة Iframe. عندما تكون الصفحتان مفتوحتان ومفتوحتان ، يكون المبدأ هو نفسه تمامًا.
دعنا نحل المشكلة الثانية: كيفية تقديم طلبات AJAX إلى نادي فرعي مختلف.
عادة ، سنستخدم رمزًا مشابهًا لما يلي لإنشاء كائن XMLHTTPrequest:
نسخة الكود كما يلي:
المصانع = [
function () {return new xmlhttprequest () ؛ } ،
function () {return new ActivexObject ("msxml2.xmlHttp") ؛ } ،
function () {return new ActivexObject ("Microsoft.xmlHttp") ؛ }
] ؛
وظيفة NewRequest () {
لـ (var i = 0 ؛ i <</span> factories.length ؛ i ++) {
يحاول{
Var Factory = المصانع [i] ؛
Return Factory () ؛
} catch (e) {}
}
العودة لاغية.
}
يشير الرمز أعلاه إلى ActivexObject للتوافق مع متصفحات سلسلة IE6. في كل مرة ندعو فيها إلى وظيفة NewRequest ، نحصل على كائن Ajax الذي أنشأناه للتو ، ثم نستخدم كائن Ajax هذا لإرسال طلب HTTP. على سبيل المثال ، يرسل الرمز التالي طلب الحصول على ABC.Example.com:
نسخة الكود كما يلي:
var request = newRequest () ؛
request.open ("get" ، "http://abc.example.com") ؛
request.send (null) ؛
على افتراض أن الكود أعلاه يتم تضمينه في صفحة تحت اسم مجال ABC.Example.com ، يمكن إرسال طلب GET بشكل طبيعي دون أي مشاكل. ومع ذلك ، إذا كنت ترسل الآن طلبًا إلى def.example.com ، فهناك مشكلة في المجال المتقاطع ويقوم محرك JavaScript بإلقاء استثناء.
الحل هو وضع ملف عبر المجال ضمن مجال def.example.com ، على افتراض أنه يسمى crossdomain.html ؛ ثم انقل تعريف دالة NewRequest السابقة إلى ملف النطاق المتقاطع هذا ؛ أخيرًا ، تمامًا مثل الممارسة السابقة لتعديل قيمة المستند.
نسخة الكود كما يلي:
<script type = "text/javaScript">
document.domain = "example.com" ؛
</script>
لاستخدام الملفات عبر المجال ، قمنا بتضمين iframe خفية تشير إلى ملفات النطاق المتقاطع في الصفحة التي تستدعي Ajax ضمن مجال ABC.Example.com ، على سبيل المثال:
[شفرة]
<iframe name = "xd_iframe" style = "display: none" src = "http://def.example.com/crossdomain.html"> </frame>
في هذا الوقت ، فإن الصفحة تحت مجال ABC.Example.com و CrossDomain.html كلاهما في نفس المجال (مثال على سبيل المثال). يمكننا استدعاء وظيفة NewRequest في crossdomain.html في الصفحة ضمن مجال ABC.Example.com:
نسخة الكود كما يلي:
var request = window.frames ["XD_IFRAME"]. NewRequest () ؛
يمكن أن يرسل كائن الطلب الذي تم الحصول عليه بهذه الطريقة طلب HTTP إلى http://def.example.com.
(2) تقنية النطاق عبر المجالات المختلفة تمامًا.
إذا كانت أسماء النطاق ذات المستوى الأعلى مختلفًا ، على سبيل المثال ، إذا كنت ترغب في التواصل على الواجهة الأمامية عبر JavaScript بين example1.com و exmentive2.com ، فإن التكنولوجيا المطلوبة أكثر تعقيدًا.
قبل شرح تقنيات المجالات المتقاطعة لمختلف المجالات ، دعنا نوضح أولاً أن التكنولوجيا التي نريد التحدث عنها أدناه تنطبق أيضًا على المواقف السابقة للمجال المتقاطع ، لأن المجال المتقاطع هو مجرد حالة خاصة لمشكلة المجال المتقاطع. بالطبع ، يمكن أن يضمن استخدام التكنولوجيا المناسبة في ظل الظروف المناسبة كفاءة أفضل واستقرار أعلى.
باختصار ، وفقًا لتلبية الاحتياجات المتقاطعة المختلفة ، يمكن تصنيف تقنيات المجال عبر الفئات التالية:
1. JSONP النطاق المتقاطع الحصول على طلب
2. التنفيذ عبر المجال من خلال iframe
3. طلب HTTP المتقاطع
4. window.postmessage
ستنتهي هذه المقالة هنا أولاً. سنقدم تقنيات المجال الأربع المذكورة أعلاه بالتفصيل. سنقدمه لاحقًا!