المتطلب 1: كيفية نقل البيانات من الصفحة الرئيسية أ إلى iframe B؟
بهذه الطريقة، تحتاج الصفحة الرئيسية إلى تمرير البيانات إلى iframe B، ومن ثم سيقوم iframe B بإجراء معالجة محددة بعد الحصول على البيانات.
طريقة التنفيذ
تتمثل حيلة التنفيذ في استخدام قيمة التجزئة لكائن الموقع لتمرير بيانات الاتصال من خلاله. نحتاج فقط إلى تعيين src الخاص بـ iframe B في الصفحة الرئيسية A وإضافة سلسلة #data بعدها (البيانات هي البيانات التي تريدها. تريد المرور)، كما هو موضح في الشكل أدناه إظهار:
ثم في iframe B، يمكنك الحصول على البيانات هنا على الفور من خلال بعض الطرق، في الواقع، الطريقة الشائعة هي:
1. اضبط المؤقت من خلال طريقة setInterval في iframe B، وراقب التغييرات في location.href للحصول على معلومات البيانات المذكورة أعلاه.
2. بعد ذلك، يمكن لـ iframe B إجراء المعالجة المنطقية المقابلة بناءً على معلومات البيانات هذه.
المتطلب 2: كيف يقوم iframe B بتمرير البيانات إلى الصفحة الرئيسية A؟
بهذه الطريقة، يحتاج iframe B إلى تمرير البيانات إلى الصفحة الرئيسية، ومن ثم ستقوم الصفحة الرئيسية بإجراء معالجة محددة بعد الحصول على البيانات.
طريقة التنفيذ
تكمن الحيلة في التنفيذ في استخدام وكيل IframeC، المضمن في iframe B ويجب أن يظل في نفس المجال مثل الصفحة الرئيسية A. ثم يمكننا استخدامه للاستفادة الكاملة من مبدأ التنفيذ لطريقة الاتصال الأولى أعلاه لنقل بيانات iframe B إلى iframeC، السؤال التالي هو كيفية السماح لـ iframeC بتمرير البيانات إلى الصفحة الرئيسية A، كما هو موضح في الشكل أدناه:
نظرًا لأن iframeC والصفحة الرئيسية موجودان في نفس المجال، يصبح نقل البيانات بينهما أسهل بكثير. طريقتنا هنا هي استخدام السمة المستخدمة بشكل متكرر window.top (يمكنك أيضًا استخدام window.parent.parent)، والتي تُرجع قيمة. مرجع إلى كائن نافذة المستوى الأعلى الذي تم تحميله في المتصفح، حتى نتمكن من استخدام الطريقة مباشرة في الصفحة الرئيسية أ، هاهاها، بسيط.
في هذه المرحلة، نقوم بإجراء تحليل وملخص بسيط
الفرضية والعيب الأكبر لهذا التنفيذ هو أن المحتوى الموجود في iframe يجب أن نتحكم فيه بواسطتنا، ولكن تنفيذنا على الأقل يعتمد على قواعد أمان المتصفح ولا يقوض أمان التطبيق نفسه.
بعض التفاصيل التي يجب مراعاتها عند التنفيذ
حاول أن تأخذ في الاعتبار سهولة الاستخدام وقابلية التوسع وقابلية الصيانة، مثل:
دع تطبيقات الطرف الثالث تحتاج فقط إلى تحميل ملف JS الأساسي الذي نقدمه لاستخدام الأدوات المتنوعة التي نقدمها لها بسهولة.
نقوم بتنظيم الأدوات المتنوعة المذكورة أعلاه في شكل حزم لزيادة التحميل عند الطلب إلى أقصى حد.
يوفر ملف JS الأساسي في العنصر الأول فقط تنفيذ الطريقة الأساسية، ويضع فيه مجموعات الأدوات الأكثر استخدامًا، مثل التكيف العالي
من خلال الملفات الأولية، نقدم أيضًا بعض مجموعات أدوات JS شائعة الاستخدام لتطبيقات الجهات الخارجية، ويمكن استخدام مجموعات الأدوات المحددة مباشرةً باستخدام آلية تحميل ديناميكية مشابهة لوحدة YUI3.
تصنيف البيانات التي تم تمريرها بواسطة تطبيقات الطرف الثالث والصفحات الرئيسية (الاتصال الذاتي، التحقق من تسجيل الدخول، البيانات التي تم تمريرها، وما إلى ذلك)
تستخدم البيانات المنقولة تنسيق JSON الذي يلبي مواصفات محددة ويتم إرسالها من خلال منفذ خدمة موحد. توفر الصفحة الرئيسية واجهة خدمة موحدة لتحليل البيانات واستدعاء الطرق المقابلة وفقًا للمواصفات.
هناك أيضًا مشكلة التحكم في الإصدار من أجل تقليل التأثير على تطبيقات الطرف الثالث، تعتمد إصدارات جميع ملفات JS المذكورة أعلاه إستراتيجية التوافق مع الإصدارات السابقة، ويتم تنفيذ الإصدارات الصغيرة باستخدام الخادم لتعيين وقت انتهاء الصلاحية يتم تغيير ذاكرة التخزين المؤقت لـ SQUID بتردد محدد يدويًا وفقًا لاحتياجات المستخدم الخاصة
بالطبع، قد لا يكون ما ورد أعلاه هو الحل الأمثل، ولكنني آمل فقط أن يوفر لك بعض المساعدة والإرشادات. كما أننا نعمل تدريجيًا على تحسين بعض أساليب التنفيذ لدينا، مثل التحكم في الإصدار. لدينا أيضًا بعض المشكلات التي يجب حلها حلها.
رمز محدد
كود المصدر للصفحة الرئيسية أ
انسخ رمز الكود كما يلي:
كود جي إس
/*الصفحة الرئيسية أ*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>الصفحة الرئيسية أ</title>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الحرف الأول () {
document.domain = 'bai.sohu.com';
تنبيه ("أنا الإطار الرئيسي، المضمن في تطبيق IframeB التابع لجهة خارجية، سيبدأ التطبيق في التحميل أدناه")؛
فار iframeTag = document.getElementById('frameB')،
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'block';
};
رد اتصال الوظيفة (ح) {
var iframeB = document.getElementById('frameB');
تنبيه ("يستدعي IframeC واجهة (الإطار الرئيسي) الخاصة بي ويمرر ارتفاع IframeB إلي. القيمة المحددة هي: ' + h)؛
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</الرأس>
<body onload="init();">
<p>أنا إطار الصفحة الرئيسية، والمجال الخاص بي هو: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</الجسم>
</html>
كود المصدر لـ iframeB (iframePage.html)
انسخ رمز الكود كما يلي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</الرأس>
<body onload="init();">
<p style="height:500px;">أنا تطبيق تابع لجهة خارجية، ونطاقي هو: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</الجسم>
</html>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الحرف الأول () {
تنبيه ("أنا تطبيق تابع لجهة خارجية. فلنقم بإنشاء قناة اتصال IframeC في نفس مجال الإطار الرئيسي، وقم بتعيين src الخاص بها، واستخدم العلامة # لتمرير قيمة الارتفاع");
فار iframeTag = document.getElementById('frameC')،
iframeSrc = 'http://bai.sohu.com/iframePageC.html#'،
pageHeight = document.documentElement.scrollHeight ||. document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'block';
window.setTimeout(function(){
تنبيه ("تقوم الصفحة الرئيسية بتعيين src الخاص بـ (IframeB) وتمرر لي الارتفاع الذي تتلقاه من خلال التجزئة (#): ' + location.hash)؛
},2000);
};
</script>
الكود المصدري لـ iframeC (iframePageC.html)
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
document.domain = 'bai.sohu.com';
تنبيه ("لقد تلقيت (IframeC) iframeB ويمرّر لي قيمة الارتفاع من خلال المعلمة (#)، وأستدعي الآن طريقة الصفحة الرئيسية لتعيين ارتفاع IframeB");
top.callback(window.location.href.split('#')[1]);
</script>