Use the scroll method of iframe window to control iframe page scrolling

How to control the scrolling of embedded iframe in the page? The method is to use the scroll method of iframe window:

1. Get the window object of iframe

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

2. Get the window document object of the iframe

var doc = iwin.document;

3. Call the scroll method of the iframe window object

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

The two parameters of scroll are the scrolling amount of the x and y axes

doc.body.scrollHeight is the height of the iframe page (including the undisplayed part)

A comprehensive application example is as follows:

Copy code The code is as follows:

hover test

ul{ background-color:#ff00ff; display:block; }

. toc li{ position:relative; width:10em; background-color:#00ff00; display:block; }

li a { /*display :block;*/ /*If displayed in block mode, it will occupy the entire parent element space*/ background-color:#0000ff; } /*a must be made a block-level element*/

li a i{ display:none; }

li a:hover{ text-align:left; }/*The code added here is just In order to display in IE6, there are no special functions, except text-decoration, color, z-index, you can write */

.toc li a:hover i{ display:block; width :6em; position:absolute; top:0; left:100%; /* Here 100% refers to the width relative to the element li*/ margin:-1em 0 0 0em; padding:1em; background:#cde; border:1px solid red; text-align:left; z-index:10000; } &lt ;/style>

&lt ;/iframe>

html code

Chapter 1 In which a dragon is seen Chapter 1 Chapter 1 In which a proncess is disappointed Chapter 1 In which a dragon is seen &lt ;/a> Chapter 1 In which a dragon is seen Chapter 1 In which a dragon is seen Chapter 1 In which a dragon is seen

function getElementAbsPos(e) { var t = e.offsetTop; var l = e.offsetLeft; while(e = e.offsetParent) { t = e.offsetTop; l = e.offsetLeft; }

return {left:l,top:t}; }

function getPosition(obj){ var left = 0; var top = 0;

while(obj != document.body){ left = obj. offsetLeft; top = obj.offsetTop; obj = obj.offsetParent; }

return left; }

var lis = document.getElementsByTagName( 'li'); var iwin = document.getElementById('iframe1').contentWindow; var doc = iwin.document; for(var i=0;i lis[i].onmouseover = function(){ var obji = this.childNodes[0].childNodes[1]; doc.writeln(' ' obji.innerText ' ,' getElementAbsPos(document.getElementById('toc')).left); doc.writeln(' ' obji.offsetLeft ',' getElementAbsPos(obji).left ',' obji.offsetWidth ', ' obji.style.left); doc.writeln(' ' doc.body.scrollHeight ' ') iwin.scroll(0,doc.body .scrollHeight); //iwin.scrollTo(10000); //Invalid } }

Use the scroll method of iframe window to control iframe page scrolling_javascript skills