Как контролировать прокрутку встроенного iframe на странице? Метод заключается в использовании метода прокрутки окна iframe:
1. Получите объект окна iframe.
вар iwin = document.getElementById('iframe1').contentWindow;
2. Получите объект документа окна iframe.
вар документ = iwin.document;
3. Вызовите метод прокрутки объекта окна iframe.
iwin.scroll(0,doc.body.scrollHeight);
Два параметра прокрутки — это величина прокрутки по осям X и Y.
doc.body.scrollHeight — высота страницы iframe (включая неотображаемую часть)
Подробный пример применения выглядит следующим образом:
Скопируйте код кода следующим образом:
<html>
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>тест при наведении</title>
<style type="text/css">
ул {
цвет фона: #ff00ff;
дисплей: блок;
}
.toc ли{
положение: относительное, ширина: 10em;
цвет фона: # 00ff00;
дисплей: блок;
}
ли а {
/*display:block;*/ /*Если отображается в блочном режиме, он будет занимать все пространство родительского элемента*/
цвет фона:#0000ff;
} /*Необходимо создать элемент уровня блока*/
ли ай {
дисплей: нет;
}
ли а:hover{
выравнивание текста: по левому краю;
}/*Добавленный здесь код предназначен только для отображения в IE6. Он не имеет никаких специальных функций, кроме оформления текста, цвета и z-индекса.
.toc li a:hover i{
дисплей: блок;
ширина: 6ем;
позиция: абсолютная;
верх: 0;
left:100%; /* Здесь 100% относится к ширине относительно элемента li*/
маржа:-1em 0 0 0em;
отступ: 1em;
фон:#cde;
граница: 1 пиксель, сплошной красный;
выравнивание текста: по левому краю;
z-индекс: 10000;
}
</стиль>
</голова>
<тело>
<iframe id="iframe1" src=""></iframe>
HTML-код
<ul id="toc">
<li><a href="1.html">Глава 1<i>В которой изображен дракон</i></a></li>
<li><a href="2.html">Глава 1<i>В которой вызывается рыцарь</i></a></li>
<li><a href="3.html">Глава 1<i>В которой неудачник разочаровывается</i></a></li>
<li><a href="4.html">Глава 1<i>В которой изображен дракон</i></a></li>
<li><a href="5.html">Глава 1<i>В которой изображен дракон</i></a></li>
<li><a href="6.html">Глава 1<i>В которой изображен дракон</i></a></li>
<li><a href="7.html">Глава 1<i>В которой изображен дракон</i></a></li>
</ul>
<script Language="JavaScript">
функция getElementAbsPos(e) {
вар т = e.offsetTop;
вар л = e.offsetLeft;
while(e = e.offsetParent) {
т += e.offsetTop;
л += e.offsetLeft;
}
вернуть {влево: л, вверху: т};
}
функция getPosition(obj){
вар слева = 0;
вар сверху = 0;
while(obj != document.body){
влево = obj.offsetLeft;
верх = obj.offsetTop;
объект = объект.offsetParent;
}
вернуться налево;
}
вар lis = document.getElementsByTagName('li');
вар iwin = document.getElementById('iframe1').contentWindow;
вар документ = 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); //Неверно;
}
}
</скрипт>
</тело>
</html>