"Same domain" modifies the iframe height of the parent page based on the height of the page referenced in the IFRAME-iframe adaptive subpage height

Source: Internet
Author: User


There are many methods available online. But that's what happens when you do a test. With the help of a good classmate, I use this method to achieve this function.

Surround the parent page with a <div> element outside the IFRAME element. Then set the initial height of <div> do not need to set, set a good width, and then surrounded by the height width of the iframe is set to 100%; You can also use the div, directly through the child page of the method to modify the level of the parent page iframe.

<!--main begin-->
   <div id= "iframeheight" >//note to set a good width in CSS, height can be emptied
     <iframe id= "Carmainbox" name= "Carmainbox" src= "dongguan.html" frameborder= "0" width= "100%" height= "100%" scrolling= "no" ></iframe>
<!--main end-->
In the referenced child page, add the following window.inload () function:

<!--update frame height window.load code-->
<script type= "Text/javascript" >
window.onload=function (num) {  
		 var s = parent.document.getElementById (' iframeheight ') | | null;
	} catch (e) {}
        //whether to obtain this element of the Div, if acquired, set his height to the inner page height plus 50px flexible space 
	s?s.style.height = Document.body.offsetHeight +50+ ' px ': ';

This method can be compatible with Chrome,ie,firefox,safari and other mainstream browsers.

Note that this function must be executed after the height of the child page is determined, otherwise its height will appear incomplete. We can add a delay function to implement the delay loading onload function.

The following method is invoked on the parent page to force the child pages in the IFRAME to be refreshed.

settimeout (function () {sonPage.window.onload ();},500);
Sonpage will default get to the inside page of the IFRAME. Then perform the OnLoad function, 500 is the time delay, in milliseconds.

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.