ينفذ location.hash التكيف مع إطار iframe عبر النطاقات

علاقة مجال الصفحة :

الصفحة الرئيسية a.html تنتمي إلى المجال أ: www.taobao.com
تنتمي صفحة iframed b.html إلى النطاق B: www.alimama.com، على افتراض أن العنوان: http://www.alimama.com/b.html

تأثير التنفيذ :

يتم تضمين الصفحة a.html ضمن اسم المجال A في الصفحة b.html ضمن اسم المجال B من خلال iframe نظرًا لأن عرض b.html وارتفاعه لا يمكن التنبؤ بهما ويمكن أن يتغيرا، فإن iframe في a.html يحتاج إلى ذلك أن تكون ذات حجم مناسب.

طبيعة المشكلة:

يواجه Node.js مشكلة في الوصول إلى iframe عبر النطاق، لأنه للتحكم في ارتفاع وعرض iframe في a.html، يجب عليك أولاً قراءة حجم b.html الذي لا ينتمي إلى نفس المجال. لأسباب أمنية، يجعل المتصفح الوصول عبر النطاقات إلى js محدودًا، ولا يمكن قراءة ارتفاع وعرض b.html.

حل:

تقديم صفحات الوكيل c.html وa.html ينتميان إلى نفس النطاق A. c.html هي صفحة وكيل وسيطة جيدة مقدمة ضمن المجال A. افترض أن عنوان c.html هو: www.taobao.com/c.html وهو المسؤول عن قراءة قيم العرض والارتفاع في location.hash، ثم قم بتعيين عرض وارتفاع iframe في ملف a.html في نفس المجال الخاص به.

الرمز هو كما يلي:

كود أتش تي أم أل

أولاً، يتم تقديم b.html من خلال iframe في ملف a.html
<معرف الإطار =”b_iframe” الارتفاع=”0″ العرض=”0″ src=”http://www.alimama.com/b.html” إطار الحدود=”no” الحدود=”0px” هامش العرض=”0″ هامش الارتفاع =”0″ التمرير =”لا” تسمح بالشفافية =”نعم” ></iframe>

كود ب.أتش تي أم أل

<نوع البرنامج النصي = "نص/جافا سكريبت">
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //http://www.taobao.com/c.html#width|height”
}
</script>
يقرأ <!–js عرض وارتفاع b.html، ويضبط عرض القراءة وارتفاعها في تجزئة src لصفحة الوكيل الوسيطة c.html في نفس المجال مثل a.html–>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”http://www.taobao.com/c.html” style=”display:none” ></iframe>

كود ج.أتش تي أم أل

<نوع البرنامج النصي = "نص/جافا سكريبت">
var b_iframe =parent.parent.document.getElementById("b_iframe");
var hash_url = window.location.hash;
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”;
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
</script>
يمكن تكييف iframe الموجود في a.html مع عرض b.html وارتفاعه.

يمكن أيضًا حل مشكلات تشغيل JS المماثلة الأخرى وفقًا لهذه الفكرة.

النص الأصلي: http://ued.alimama.com/?p=197