Comment contrôler le défilement des iframes intégrés dans la page ? La méthode consiste à utiliser la méthode de défilement de la fenêtre iframe :
1. Obtenez l'objet window de l'iframe
var iwin = document.getElementById('iframe1').contentWindow;
2. Obtenez l'objet document fenêtre de l'iframe
var doc = iwin.document;
3. Appelez la méthode de défilement de l'objet fenêtre iframe
iwin.scroll(0,doc.body.scrollHeight);
Les deux paramètres de défilement sont la quantité de défilement des axes x et y
doc.body.scrollHeight est la hauteur de la page iframe (y compris la partie non affichée)
Un exemple d’application complet est le suivant :
Copiez le code comme suit :
<html>
<tête>
<méta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test de survol</title>
<style type="text/css">
ul{
couleur d'arrière-plan : #ff00ff ;
affichage:bloc;
}
.toc li{
position : relative ; largeur : 10em ;
couleur d'arrière-plan : #00ff00 ;
affichage:bloc;
}
li un {
/*display:block;*/ /*S'il est affiché en mode bloc, il occupera tout l'espace de l'élément parent*/
couleur d'arrière-plan : #0000ff ;
} /*Doit créer un élément de niveau bloc*/
li ai{
affichage : aucun ;
}
li a:survoler{
texte-align:gauche;
}/*Le code ajouté ici est uniquement destiné à être affiché par IE6. Il n'a pas de fonctions spéciales. Il peut être écrit à l'exception de la décoration de texte, de la couleur et du z-index.
.toc li a:survoler i{
affichage:bloc;
largeur : 6em ;
position : absolue ;
haut : 0 ;
left:100%; /* Ici, 100% fait référence à la largeur par rapport à l'élément li*/
marge :-1em 0 0 0em ;
rembourrage : 1 em ;
arrière-plan :#cde ;
bordure : 1 px rouge uni ;
texte-align:gauche;
indice z : 10 000 ;
}
</style>
</tête>
<corps>
<iframe id="iframe1" src=""></iframe>
code HTML
<ul id="toc">
<li><a href="1.html">Chapitre 1<i>Dans lequel on voit un dragon</i></a></li>
<li><a href="2.html">Chapitre 1<i>Dans lequel un chevalier est invoqué</i></a></li>
<li><a href="3.html">Chapitre 1<i>Dans lequel un échec est déçu</i></a></li>
<li><a href="4.html">Chapitre 1<i>Dans lequel on voit un dragon</i></a></li>
<li><a href="5.html">Chapitre 1<i>Dans lequel on voit un dragon</i></a></li>
<li><a href="6.html">Chapitre 1<i>Dans lequel on voit un dragon</i></a></li>
<li><a href="7.html">Chapitre 1<i>Dans lequel on voit un dragon</i></a></li>
</ul>
<langage de script="javascript">
fonction getElementAbsPos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return {gauche: l, haut: t} ;
}
fonction getPosition(obj){
var gauche = 0 ;
var haut = 0 ;
while(obj != document.body){
gauche = obj.offsetLeft;
top = obj.offsetTop;
obj = obj.offsetParent ;
}
revenez à gauche;
}
var lis = document.getElementsByTagName('li');
var iwin = document.getElementById('iframe1').contentWindow;
var doc = iwin.document;
pour(var i=0;i<lis.length;i++){
lis[i].onmouseover = fonction(){
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); //Invalide
}
}
</script>
</corps>
</html>