¿Cómo controlar el desplazamiento del iframe incrustado en la página? El método consiste en utilizar el método de desplazamiento de la ventana iframe:
1. Obtenga el objeto de ventana del iframe
var iwin = document.getElementById('iframe1').contentWindow;
2. Obtenga el objeto de documento de ventana del iframe.
var doc = iwin.documento;
3. Llame al método de desplazamiento del objeto de ventana iframe.
iwin.scroll(0,doc.body.scrollHeight);
Los dos parámetros del desplazamiento son la cantidad de desplazamiento de los ejes xey.
doc.body.scrollHeight es la altura de la página iframe (incluida la parte no mostrada)
Un ejemplo de aplicación completo es el siguiente:
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312">
<title>prueba de desplazamiento</title>
<tipo de estilo="texto/css">
ul{
color de fondo:#ff00ff;
mostrar:bloquear;
}
.toc li{
posición: relativa; ancho: 10 em;
color de fondo:#00ff00;
mostrar:bloquear;
}
li a {
/*display:block;*/ /*Si se muestra en modo bloque, ocupará todo el espacio del elemento principal*/
color de fondo:#0000ff;
} /*Debe crear un elemento a nivel de bloque*/
li ai {
pantalla: ninguna;
}
li a: flotar {
alineación de texto: izquierda;
}/*El código agregado aquí es solo para que IE6 lo muestre. No tiene funciones especiales. Se puede escribir excepto decoración de texto, color e índice z.
.toc li a: flotar i {
mostrar:bloquear;
ancho: 6em;
posición:absoluta;
arriba: 0;
left:100% /* Aquí 100% se refiere al ancho relativo al elemento li*/
margen:-1em 0 0 0em;
relleno: 1em;
fondo:#cde;
borde: 1px rojo sólido;
alineación de texto: izquierda;
índice z: 10000;
}
</estilo>
</cabeza>
<cuerpo>
<iframe id="iframe1" src=""></iframe>
código html
<ul id="toc">
<li><a href="1.html">Capítulo 1<i>En el que se ve un dragón</i></a></li>
<li><a href="2.html">Capítulo 1<i>En el que se convoca a un caballero</i></a></li>
<li><a href="3.html">Capítulo 1<i>En el que un fracaso se decepciona</i></a></li>
<li><a href="4.html">Capítulo 1<i>En el que se ve un dragón</i></a></li>
<li><a href="5.html">Capítulo 1<i>En el que se ve un dragón</i></a></li>
<li><a href="6.html">Capítulo 1<i>En el que se ve un dragón</i></a></li>
<li><a href="7.html">Capítulo 1<i>En el que se ve un dragón</i></a></li>
</ul>
<lenguaje de escritura="javascript">
función getElementAbsPos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
mientras(e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
devolver {izquierda:l,arriba:t};
}
función obtenerPosición(obj){
var izquierda = 0;
var superior = 0;
mientras(obj!= documento.cuerpo){
izquierda = obj.offsetLeft;
arriba = obj.offsetTop;
obj = obj.offsetParent;
}
regresar a la izquierda;
}
var lis = document.getElementsByTagName('li');
var iwin = document.getElementById('iframe1').contentWindow;
var doc = iwin.documento;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = función(){
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); //No válido
}
}
</script>
</cuerpo>
</html>