فكرة ذكية أخرى عن تحقيق القدرة على التكيف مع نوافذ iframe

الكاتب：Eve Cole وقت التحديث：2025-02-23 11:32:01

هناك صفحة index.html في Domaina ، والتي تعشش صفحة أخرى. html في domainb من خلال iframe

نظرًا لأن صفحة أخرى. html يتم عرضها في iframe وستزيد محتوى الصفحة أو ينخفض ديناميكيًا ، يجب إزالة شريط التمرير الخاص بـ iframe الآن

نظرًا لقيود سياسة JavaScript ذات الأصل من نفس ، لا يمكن إجراء عملية عبر المجال ، مما يجعل المشكلة أكثر صعوبة

لقد أشرت إلى الممارسة عبر الإنترنت وقدمت صفحة وكيل ، أو Agent.html ، التي تنتمي إلى Domaina

ثم ، في other.html في domainb ، استخدم iframe إلى Nest Agent.html

حسنًا ، الوضع الآن هو:

index.html تعشش other.html باستخدام iframe

other.htmlnest Agent.html باستخدام iframe

السبب في أن Agent.html الصفحة الثالثة هو الالتزام بقواعد "سياسة الأصل من نفس" وإكمال تمرير المعلمات تحت مجالات مختلفة!

هدفنا النهائي هو إزالة شريط التمرير والتأكد من عرض جميع محتوى الصفحة المضمن

1. احصل على الارتفاع الفعلي للصفحة الأخرى

2. ضبط الارتفاع على خاصية SRC من iframe IT مضمونة

3. في Agent.html ، قم بقطع قيمة الارتفاع في سمة SRC من iframe.

في المثال التالي ، يتم استخدام خدعة لتجنب استخدام setInterval () لتعيين ارتفاع IFRAME باستمرار.

تتمثل الطريقة في إرفاق الطابع الزمني بـ SRC IFRAME ، بحيث يقوم المتصفح بإعادة تحميل Agent.html في كل مرة

ثم اترك وظيفة JS InvokeMethodIntOpwindow () في Agent.hml يتم تنفيذها

2 html في دومينا

index.html

نسخة الكود كما يلي:

#{تمتد 'main.html' /}

#{set title: 'home' /}

<hr>

<div style = "color: red ؛ font-weight: bold"> application-bypass القيود المفروضة على السياسات المتماثلة ، وفي الوقت نفسه ، استخدم سياسات متجانسة لإزالة شريط التمرير من iframe ، وضبط ارتفاع النافذة ديناميكيًا ، بحيث يمكن أن تعرض جميع محتويات الصفحة المتداخلة </div>

<!-iframe يتطلب ضبط الارتفاع الديناميكي->

</div>

وظيفة تغيير حجم (الارتفاع) {

// تنبيه ("تغيير الحجم") ؛

document.getElementSbyName ("domainb") [0]. height = الارتفاع ؛

}

</script>

Agent.html

نسخة الكود كما يلي:

<! doctype html>

<html>

<head>

<title> إدراج العنوان هنا </title>

</head>

<body>

أنا صفحة الوكيل!

window.onload = vokeMethodIntOpWindow ؛

دالة vokemethodintopwindow () {

// ALERT ("استدعاء الوظيفة ضمن نفس المجال وأعد ضبط ارتفاع iFrame") ؛

var domaina = document.parentWindow ؛

var realheight = domaina.location.hash.split ("#") [1] ؛

// الخطوة الأخيرة: اتصل بوظيفة النافذة العلوية لإعادة ضبط ارتفاع iFrame

Parent.Parent.Resize (Realheight) ؛

// ALERT ("Realheight:"+Realheight) ؛

//alert(document.parentwindow.name) ؛//get اسم النافذة حيث توجد الحاوية Domaina

//error://alert(document.parentwindow.parent.name) ؛

//alert(document.parentwindow.parent.parent.name) ؛

}

// بعد تعيين سمة SRC من iframe مع طوابع زمنية مختلفة ، لا تحتاج إلى استخدام SetInterval ()

// setInterval ("InvokeMethodIntOpWindow ()" ، 100) ؛

</script>

</body>

</html>

other.html في domainb

نسخة الكود كما يلي:

<! doctype html>

<html>

<head>

<title> إدراج العنوان هنا </title>

</head>

<!-صفحة مضمنة في المجال A->

<button type = "button" onClick = "btnclick ()"> عرض التبديل </button>

في JavaScript ، هناك قيود أمنية مهمة للغاية بعنوان "سياسة الأصل من نفس".

تضع هذه الاستراتيجية قيودًا مهمة على محتوى الصفحة الذي يمكن أن يصل إليه رمز JavaScript ، أي أن JavaScript لا يمكنه الوصول إلا إلى المحتوى ضمن نفس المجال الذي يحتوي عليه المستند.