Home > Developer > JavaScript
How to Control embedded iframe scrolling in pages? 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 iframe
Var doc = iwin.doc ument;
3. Call the scroll method of the iframe window object
Iwin. scroll (0, doc. body. scrollHeight );
Scroll has two parameters: x and Y-axis.
Doc. body. scrollHeight is the height of the iframe page (including undisplayed parts)
An example of a comprehensive application is as follows:
Copy codeThe Code is as follows:
<Html>
<Head>
<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 {
/* Display: block; * // * if it is displayed in block mode, the entire space of the parent element is occupied */
Background-color: # 0000ff;
}/* Must make a block-level element */
Li a I {
Display: none;
}
Li a: hover {
Text-align: left;
}/* The code added here is only for IE6 display. There is no special function, except text-decoration, color, and z-index */
. 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;
}
</Style>
</Head>
<Body>
<Iframe id = "iframe1" src = "" width = "400" height = "300"> </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 left;
}
Var lis = document. getElementsByTagName ('lil ');
Var iwin = document. getElementById ('iframe1'). contentWindow;
Var doc = iwin.doc ument;
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); // invalid
}
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
