IFRAME adaptive height

Search IFRAME adaptive height by Google. More than results are returned. Search IFRAME highly adaptive. More than results are returned.
I rummaged through the previous several decades to dig out a large number of reposts. The three or five articles were original. In these original articles, we basically only talk about how to adapt to the static state, that is, how to perform dynamic synchronization without considering how to perform dynamic synchronization after JS operations on Dom. In addition, the compatibility is not thorough.

This articleArticleIn this case, we hope to make further research.

Some people may have not touched this issue yet. First, Let's explain what an adaptive height is. The so-called IFRAME adaptive height is to hide the border and scrollbar of IFRAME Based on the aesthetic and interaction of the interface, so that it cannot be seen as an IFRAME. If IFRAME always calls a page of the same fixed height, we can simply write the height of IFRAME. If you want to switch the IFRAME page or the contained page to perform Dom dynamic operations, you needProgramSynchronize the IFRAME height and the actual height of the page to be included.

By the way, IFRAME can only be used as a last resort, which will cause too much trouble for front-end development.

There are roughly two traditional practices:
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.
InCodeFrom the maintenance perspective, method 2 is better than method 1, because method 1 introduces the same code for each contained page to do this, creating many 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: iframe_a.html on the homepage, which contains iframe_ B .htm and iframe_c.html

Sample Code on the home page:

 
<IFRAME id = "frame_content" src = "iframe_ B .html" scrolling = "no" frameborder = "0"> </iframe> <SCRIPT type = "text/JavaScript"> function reinitiframe () {var IFRAME = document. getelementbyid ("frame_content"); try {IFRAME. height = iframe.content1_document.doc umentelement. scrollheight;} catch (Ex) {}} window. setinterval ("reinitiframe ()", 200); </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:

<Div> <button onclick = "checkheight ()"> check height </button> </div> <SCRIPT type = "text/JavaScript"> function checkheight () {var IFRAME = document. getelementbyid ("frame_content"); var bheight = iframe.content?#doc ument. body. scrollheight; var dheight = iframe.content?#document.doc umentelement. scrollheight; alert ("bheight:" + bheight + ", dheight:" + dheight) ;}</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:

 
<Div> <button onclick = "toggleoverlay ()"> toggle overlay </button> </div> <Div style = "height: 160px; position: relative "> <Div id =" overlay "style =" position: absolute; width: 280px; Height: 280px; display: none; "> </div> <SCRIPT type =" text/JavaScript "> function toggleoverlay () {var overlay = document. getelementbyid ('overlay '); overlay. style. display = (overlay. style. display = 'None ')? 'Block': 'none';} </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:

 
Function reinitiframe () {var IFRAME = document. getelementbyid ("frame_content"); try {var bheight = iframe.content+doc ument. body. scrollheight; var dheight = iframe.content?#document.doc umentelement. scrollheight; var Height = math. max (bheight, dheight); IFRAME. height = height;} catch (Ex) {}} 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: