استخدم طريقة التمرير لنافذة iframe للتحكم في تمرير صفحة iframe

كيف تتحكم في تمرير iframe المضمن في الصفحة؟ تتمثل الطريقة في استخدام طريقة التمرير لنافذة iframe:

1. احصل على كائن نافذة iframe

var iwin = document.getElementById('iframe1').contentWindow;

2. احصل على كائن مستند النافذة الخاص بإطار iframe

var doc = iwin.document;

3. قم باستدعاء طريقة التمرير لكائن نافذة iframe

iwin.scroll(0,doc.body.scrollHeight);

المعلمتان للتمرير هما مقدار التمرير للمحورين x و y

doc.body.scrollHeight هو ارتفاع صفحة iframe (بما في ذلك الجزء غير المعروض)

مثال التطبيق الشامل هو كما يلي:

انسخ رمز الكود كما يلي:

<أتش تي أم أل>

<الرأس>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>اختبار التمرير</title>

<نمط النوع = "نص/CSS">

أول {

لون الخلفية:#ff00ff;

عرض:كتلة؛

}

توك لي{

الموقف: العرض النسبي: 10 م؛

لون الخلفية:#00ff00;

عرض:كتلة؛

}

لى {

/*display:block;*/ /*إذا تم عرضه في وضع الحظر، فسوف يشغل مساحة العنصر الأصلي بالكامل*/

لون الخلفية:#0000ff;

} /*يجب إنشاء عنصر على مستوى الكتلة*/

لي آي {

العرض: لا شيء؛

}

لى:تحوم{

محاذاة النص:يسار؛

}/*الكود المضاف هنا مخصص لـ IE6 فقط للعرض، ولا يحتوي على وظائف خاصة، ويمكن كتابته باستثناء زخرفة النص واللون وفهرس z*/.

.toc لى:تحوم أنا{

عرض:كتلة؛

العرض: 6م؛

الموقف:مطلق؛

أعلى:0؛

left:100% /* هنا 100% تشير إلى العرض بالنسبة للعنصر li*/

الهامش: -1em 0 0 0em؛

الحشو: 1em؛

الخلفية:#cde;

الحدود: 1 بكسل أحمر خالص؛

محاذاة النص:يسار؛

مؤشر z:10000;

}

</نمط>

</الرأس>

<الجسم>

<iframe id="iframe1" src=""></iframe>

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

<ul معرف = "توك">

<li><a href="1.html">الفصل الأول<i>الذي يظهر فيه تنين</i></a></li>

<li><a href="2.html">الفصل الأول<i>يتم فيه استدعاء الفارس</i></a></li>

<li><a href="3.html">الفصل الأول<i>الشعور بخيبة الأمل عند الفشل</i></a></li>

<li><a href="4.html">الفصل الأول<i>الذي يظهر فيه تنين</i></a></li>

<li><a href="5.html">الفصل الأول<i>الذي يظهر فيه تنين</i></a></li>

<li><a href="6.html">الفصل الأول<i>الذي يظهر فيه تنين</i></a></li>

<li><a href="7.html">الفصل الأول<i>الذي يظهر فيه تنين</i></a></li>

</ul>

<لغة البرمجة = "جافا سكريبت">

وظيفة getElementAbsPos(e) {

var t = e.offsetTop;

var l = e.offsetLeft;

بينما (e = e.offsetParent) {

t += e.offsetTop;

l += e.offsetLeft;

}

العودة {يسار: ل، أعلى: ر}؛

}

وظيفة getPosition(obj){

فار اليسار = 0؛

فار الأعلى = 0;

بينما (obj!= document.body){

left = obj.offsetLeft;

top = obj.offsetTop;

obj = obj.offsetParent;

}

العودة إلى اليسار؛

}

var lis = document.getElementsByTagName('li');

var iwin = document.getElementById('iframe1').contentWindow;

var doc = iwin.document;

for(var i=0;i<lis.length;i++){

lis[i].onmouseover = function(){

var obji = this.childNodes[0].childNodes[1];

doc.writeln('<br>'+ obji.innerText + ',' + getElementAbsPos(document.getElementById('toc')).left);

doc.writeln('<br>'+ obji.offsetLeft + ',' + getElementAbsPos(obji).left + ',' + obji.offsetWidth+ ',' + obji.style.left);

doc.writeln('<br><b>'+ doc.body.scrollHeight + '</b>')

iwin.scroll(0,doc.body.scrollHeight);

//iwin.scrollTo(10000); //غير صالح

}

}

</script>

</الجسم>

</html>