Home > Others

Then, IFRAME automatically adapts to the height.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Method 1: After each contained page is loaded, execute js to get the height of the page, and then synchronize the IFRAME height of the parent page.
Method 2: Execute Js in the onload event of IFRAME on the home page to get the height of the contained page and synchronize the height.
From the perspective of code maintenance, method 2 is better than method 1, because method 1, each page to be included should introduce the same code to do this, creating a lot of copies.

Both methods only process static things, that is, they are executed only when the content is loaded. It is not convenient if Javascript is used to operate the height changes caused by Dom.

If an interval is made in the main window, it will not stop getting the height of the page to be included, and then synchronize it. Is it convenient? Does it solve the problem of JS Dom operations? The answer is yes.

Demo page: Home PageIframe_a.html, Included pageIframe_ B .htmAndIframe_c.html

Sample Code on the home page:

 
  1. <IFRAME id = "frame_content" src = "iframe_ B .html" scrolling = "no" frameborder = "0"> </iframe>
  2. <SCRIPT type = "text/JavaScript">
  3. Function reinitiframe (){
  4. VaR IFRAME = Document. getelementbyid ("frame_content ");
  5. Try {
  6. IFRAME. Height = iframe.content?document.doc umentelement. scrollheight;
  7. } Catch (Ex ){}
  8. }
  9. Window. setinterval ("reinitiframe ()", 200 );
  10. </SCRIPT>

Keep running, will there be a problem with efficiency?
I did a test and opened five windows at the same time (IE6, IE7, FF, opera, and Safari) to execute this code without affecting the CPU or even adjusting it to 2 ms, it does not affect (basically maintained at the 0% usage ).

Next we will talk about the compatibility of various browsers. How to get the correct height is mainly to compare the body. scrollheight and documentelement. scrollheight. Note that this doctype is used in this article. Different doctype will not affect the result, but if your page does not declare doctype, add one first.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Append the following test code to the home page to output the two values. Sample Code:

 
  1. <Div> <button onclick = "checkheight ()"> check height </button> </div>
  2. <SCRIPT type = "text/JavaScript">
  3. Function checkheight (){
  4. VaR IFRAME = Document. getelementbyid ("frame_content ");
  5. VaR bheight = iframe.content20.doc ument. Body. scrollheight;
  6. VaR dheight = iframe.content?document.doc umentelement. scrollheight;
  7. Alert ("bheight:" + bheight + ", dheight:" + dheight );
  8. }
  9. </SCRIPT>

When a page is loaded, you can switch to an absolutely positioned layer to dynamically change the page height. If the layer is expanded, the page height is increased. Sample Code:

 
  1. <Div>
  2. <Button onclick = "toggleoverlay ()"> toggle overlay </button>
  3. </Div>
  4. <Div style = "height: 160px; position: relative">
  5. <Div id = "overlay" style = "position: absolute; width: 280px; Height: 280px; display: none;"> </div>
  6. </Div>
  7. <SCRIPT type = "text/JavaScript">
  8. Function toggleoverlay (){
  9. VaR overlay = Document. getelementbyid ('overlay ');
  10. Overlay. style. Display = (overlay. style. Display = 'None ')? 'Block': 'none ';
  11. }
  12. </SCRIPT>

The test values of the above Code in various browsers are listed below:
(Bheight = body. scrollheight, dheight = documentelement. scrollheight, Red = error value, Green = correct value)

/ Layer hiding Layer Expansion
Bheight Dheight Bheight Dheight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184

Ignore the problem that opera is 3 pixels less than others... It can be seen that if there is no absolute positioning, the two values are equal and it doesn't matter which one is taken.
However, if yes, the performance of each browser is not the same. The value of a single browser is incorrect. However, we can find a rule, that is, taking two values that are worth the maximum value can be compatible with different browsers. Therefore, our homepage code should be transformed into this:

 
  1. Function reinitiframe (){
  2. VaR IFRAME = Document. getelementbyid ("frame_content ");
  3. Try {
  4. VaR bheight = iframe.content20.doc ument. Body. scrollheight;
  5. VaR dheight = iframe.content?document.doc umentelement. scrollheight;
  6. VaR Height = math. Max (bheight, dheight );
  7. IFRAME. Height = height;
  8. } Catch (Ex ){}
  9. }
  10. Window. setinterval ("reinitiframe ()", 200 );

In this way, the compatibility problem is basically solved. By the way, not only the absolutely positioned layer will affect the value, but float will also lead to the difference between the two values.

If you demonstrate the demo, you will find that, except for IE, in other browsers, the layer is hidden after it is expanded, and the obtained height value remains at 303 of the expanded height, instead of hiding it back, the actual value is 184, that is, it cannot be scaled back after it grows taller. This phenomenon also occurs between different included pages. When switching from a high page to a low page, the height is still the value of that height.
It can be concluded that when the height of the IFRAME form is higher than the actual height of the document, the height of the form is taken. When the height of the form is lower than the actual height of the document, the actual height of the document is taken. Therefore, it is necessary to set the height to a value lower than the actual document before synchronizing the height. Therefore, add onload = "This. Height = 100" to the IFRAME so that the page is scaled to a shorter size before being synchronized to the same height.
This value is determined in practical applications, but cannot be too short. Otherwise, there will be obvious flashes in browsers such as ff. When Dom operations are performed, the Homepage cannot be monitored, but the height is reduced after Dom operations are completed.
In one of my actual projects, I didn't do this because every Dom function needs to insert this code, and the cost is too high, in fact, it is not so fatal to scale back the layer. This was not done in the demo. If you have a better method, please let me know.

This is the final homepage code:

 
 
    
  
  
  1. <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"
    2. 
  
  
  2.  onload="this.height=100"></iframe>
    3. 
  
  
  3. <script type="text/javascript">
    4. 
  
  
  4. function reinitIframe(){
    5. 
  
  
  5. var iframe = document.getElementById("frame_content");
    6. 
  
  
  6. try{
    7. 
  
  
  7. var bHeight = iframe.contentWindow.document.body.scrollHeight;
    8. 
  
  
  8. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    9. 
  
  
  9. var height = Math.max(bHeight, dHeight);
    10. 
  
  
  10. iframe.height =  height;
    11. 
  
  
  11. }catch (ex){}
    12. 
  
  
  12. }
    13. 
  
  
  13. window.setInterval("reinitIframe()", 200);
    14. 
  
  
  14. </script>
    15.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
automatically backup files to dropbox change http to https automatically automatically connect to wifi android then compared to than how to update wordpress automatically how to backup dropbox automatically how to automatically backup files to dropbox

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More