How do you control the inline iframe scrolling in the page? The method is to use the scroll method of the iframe window:
1, get the Window object of the IFRAME
var iwin = document.getElementById (' iframe1 '). Contentwindow;
2, get the window Document object of the IFRAME
var doc = iwin.document;
3, invoke the scroll method of the IFrame window object
Iwin.scroll (0,doc.body.scrollheight);
Scroll two parameters for the x,y axis of the rolling volume
Doc.body.scrollHeight is the height of the IFRAME page (contains the part not shown)
An integrated application example is as follows:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>hover test</title>
<style type= "Text/css" >
ul{
Background-color: #ff00ff;
Display:block;
}
. TOC li{
position:relative; Width:10em;
Background-color: #00ff00;
Display:block;
}
Li a {
/*display:block;*//* If shown in block mode, it will fill up the entire parent element space.
Background-color: #0000ff;
/* must make a a block-level element * *
Li a i{
Display:none;
}
Li a:hover{
Text-align:left;
}/* here to add the code just to let IE6 display, no special features, in addition to Text-decoration,color,z-index can write * *
. TOC Li A:hover i{
Display:block;
Width:6em;
Position:absolute;
top:0;
left:100%; /* Here 100% refers to the width of the element li * *
Margin:-1em 0 0 0em;
Padding:1em;
Background: #cde;
border:1px solid red;
Text-align:left;
z-index:10000;
}
</style>
<body>
<iframe id= "iframe1" src= "width=" "height=" ></iframe>
HTML code
<ul class= "TOC" id= "TOC" >
<li><a href= "1.html" >chapter 1<i>in which a dragon is seen</i></a></li>
<li><a href= "2.html" >chapter 1<i>in which a knight is summoned</i></a></li>
<li><a href= "3.html" >chapter 1<i>in which a proncess is disappointed</i></a></li>
<li><a href= "4.html" >chapter 1<i>in which a dragon is seen</i></a></li>
<li><a href= "5.html" >chapter 1<i>in which a dragon is seen</i></a></li>
<li><a href= "6.html" >chapter 1<i>in which a dragon is seen</i></a></li>
<li><a href= "7.html" >chapter 1<i>in which a dragon is seen</i></a></li>
</ul>
<script language= "JavaScript" >
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 to left;
}
var lis = document.getelementsbytagname (' li ');
var iwin = document.getElementById (' iframe1 '). Contentwindow;
var doc = 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.L EFT);
Doc.writeln (' <br><b> ' + doc.body.scrollHeight + ' </b> ')
Iwin.scroll (0,doc.body.scrollheight);
Iwin.scrollto (10000); Invalid
}
}
</script>
</body>
