Loading iframe subpages in javascript, adaptive height

Source: Internet
Author: User

Assume that there is a div on the home page, and an iframe is placed in it.
Copy codeThe Code is as follows:
<Div id = "frameBox">
<Iframe id = "frameWin" src = "1.html" name = "opWin" style = "width: 100%; height: 100% "frameborder =" 0 "scrolling =" no "> </iframe>
</Div>

The three menu links are loaded on the iframe.

The three subpages load window. onload on their own pages and execute
Copy codeThe Code is as follows:
Function aa (){
Var newHeight = document. body. scrollHeight + 20 + "px ";
Optional bytes parent.doc ument. getElementById ("frameBox"). style. height = newHeight;
// The above firefox is passed, but ie6 must add the following sentence. Otherwise, the iframe height is changed, but the visible area is not changed.
Optional bytes parent.doc ument. getElementById ("frameWin"). style. height = newHeight;
}

In the following method, you only need to put the code on the home page:
Page code:
Copy codeThe Code is as follows:
<Div style = "border: 1px solid #7e99c6" id = "frameBox">
<Iframe id = "frameWin" src = "01.html" name = "opWin" style = "width: 100%; height: 100% "frameborder =" 0 "scrolling =" no "onload =" test2 () "> </iframe>
</Div>

Js script (on the homepage ):
Copy codeThe Code is as follows:
Function test2 (){
Var frameWin = document. getElementById ("frameWin ");
Var frameBox = document. getElementById ("frameBox ");
Var newHeight;
If (frameWin. Document ){
NewHeight = frameWin. Document. body. scrollHeight + 20 + "px ";
} Else {
NewHeight = frameWin. contentDocument. body. scrollHeight + 20 + "px ";
}
FrameWin. style. height = newHeight;
FrameBox. style. height = newHeight;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.