Bagaimana cara mengontrol pengguliran iframe yang tertanam di halaman? Caranya adalah dengan menggunakan metode gulir jendela iframe:
1. Dapatkan objek jendela iframe
var iwin = dokumen.getElementById('iframe1').contentWindow;
2. Dapatkan objek dokumen jendela iframe
var doc = iwin.dokumen;
3. Panggil metode gulir objek jendela iframe
iwin.scroll(0,doc.body.scrollHeight);
Dua parameter gulir adalah jumlah gulir sumbu x dan y
doc.body.scrollHeight adalah tinggi halaman iframe (termasuk bagian yang tidak ditampilkan)
Contoh penerapan komprehensifnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312">
<title>uji arahkan kursor</title>
<gaya tipe="teks/css">
kamu{
warna latar belakang:#ff00ff;
tampilan:blok;
}
.toc li{
posisi:relatif; lebar:10em;
warna latar belakang:#00ff00;
tampilan:blok;
}
li a {
/*display:block;*/ /*Jika ditampilkan dalam mode blok, ini akan menempati seluruh ruang elemen induk*/
warna latar belakang:#0000ff;
} /*Harus membuat elemen tingkat blok*/
li ai{
tampilan: tidak ada;
}
li a: arahkan kursor{
perataan teks:kiri;
}/*Kode yang ditambahkan di sini hanya untuk ditampilkan di IE6. Tidak ada fungsi khusus. Kode ini dapat ditulis kecuali untuk dekorasi teks, warna, dan indeks-z*/
.toc li a: arahkan kursor ke i{
tampilan:blok;
lebar:6em;
posisi:mutlak;
atas:0;
kiri:100%; /* Di sini 100% mengacu pada lebar relatif terhadap elemen li*/
margin:-1em 0 0 0em;
bantalan:1em;
latar belakang:#cde;
batas:1px merah pekat;
perataan teks:kiri;
indeks-z:10000;
}
</gaya>
</kepala>
<tubuh>
<iframe id="iframe1" src=""></iframe>
kode html
<ul id="toc">
<li><a href="1.html">Bab 1<i>Di mana seekor naga terlihat</i></a></li>
<li><a href="2.html">Bab 1<i>Di mana seorang ksatria dipanggil</i></a></li>
<li><a href="3.html">Bab 1<i>Dimana kekecewaan dikecewakan</i></a></li>
<li><a href="4.html">Bab 1<i>Di mana seekor naga terlihat</i></a></li>
<li><a href="5.html">Bab 1<i>Di mana seekor naga terlihat</i></a></li>
<li><a href="6.html">Bab 1<i>Di mana seekor naga terlihat</i></a></li>
<li><a href="7.html">Bab 1<i>Di mana seekor naga terlihat</i></a></li>
</ul>
<skrip bahasa="javascript">
fungsi getElementAbsPos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetKiri;
}
kembali {kiri:l,atas:t};
}
fungsi getPosition(obj){
var kiri = 0;
var atas = 0;
while(obj != dokumen.body){
kiri = obj.offsetLeft;
atas = obj.offsetTop;
obj = obj.offsetParent;
}
kembali ke kiri;
}
var lis = dokumen.getElementsByTagName('li');
var iwin = dokumen.getElementById('iframe1').contentWindow;
var doc = iwin.dokumen;
for(var i=0;i<lis.panjang;i++){
lis[i].onmouseover = fungsi(){
var obji = ini.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); //Tidak valid
}
}
</skrip>
</tubuh>
</html>