An IFRAME Adaptive height solution detailed tutorial

Through the Google search iframe adaptive height, the results of more than 5W, search iframe highly adaptive, the results of 2W more than one.


I turned the front of the dozens of, planed to a large number of reprint, there are so 35 articles are original. And this several original inside, basically only talked about how to adapt to static things, is not taking into account JS Operation Dom, how to do dynamic synchronization problem. In addition, in terms of compatibility, the study is not thorough.





This article, I hope to do some further in these two aspects.





Maybe someone has not come into contact with this problem, first of all, what is adaptive height bar. The so-called IFRAME adaptive height, that is, based on the interface aesthetic and interactive considerations, hiding the border and scrollbar iframe, so that people do not see it is an IFRAME. If the IFRAME always calls the same fixed height page, we can simply write dead iframe Heights. And if the iframe to switch pages, or included pages to do DOM dynamic operation, this time, you need the program to synchronize the height of the iframe and the actual height of the included page.





by the way, the IFRAME in the forced time to use, it will lead to the front-end development of too much trouble.




There are roughly two traditional approaches to
:


method One, after each included page in its own content loaded, execute JS to get the height of this page, and then to sync the parent page of the iframe height.


method Two, in the main page iframe in the OnLoad event to execute JS, to get the content of the page contains the height, and then go to sync height.


in the Code maintenance perspective, method Two is better than method one, because method one, each included page to introduce a piece of the same code to do this thing, create a lot of copies.





two methods are only to deal with static things, that is, only when the content loading, if JS to operate the DOM caused by the height of changes, are not very convenient.





if the main window to do a interval, non-stop to get the height of the included page, and then do synchronization, is not convenient, but also solve the problem of JS Operation Dom? The answer is yes.





Demo page: Main Page iframe_a.html, included page iframe_b.htm and iframe_c.html





Home Page code example:





<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.contentWindow.document.documentElement.scrollHeight;





}catch (ex) {}





}





Window.setinterval ("Reinitiframe ()", 200);





</script> has been executing, will there be any problem with efficiency?


I did the test, opened 5 windows (IE6, IE7, FF, Opera, Safari) to execute this code, will not have any effect on the CPU, or even adjust to 2ms, also did not affect (basically maintain at 0% occupancy rate).





The following is a discussion of the compatibility of each browser, how to get to the right height, mainly on the Body.scrollheight and documentelement.scrollheight two worth comparison. Note This article is using this DOCTYPE, different DOCTYPE should not affect the results, but if your page does not declare DOCTYPE, it is better to add a bar first.





<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > appends the following test code to the main page to output the two values. code example:





<div><button onclick= "Checkheight ()" >check height</button></div><script type= "text /javascript ">





function Checkheight () {





var iframe = document.getElementById ("frame_content");





var bheight = iframe.contentWindow.document.body.scrollHeight;





var dheight = iframe.contentWindow.document.documentElement.scrollHeight;





alert ("Bheight:" + bheight + ", Dheight:" + dheight);





}





</script> loaded page, you can switch an absolutely positioned layer, so that the page height dynamic change. If the layer expands, the height of the page will be elevated. code example:





<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>





</div>





<script type= "Text/javascript" >





function Toggleoverlay () {





var overlay = document.getElementById (' overlay ');





Overlay.style.display = (Overlay.style.display = = ' None ')? ' Block ': ' None ';





}





</script> Below is a list of the above code's test values in each browser:


(bheight = body.scrollheight, dheight = documentelement.scrollheight, red = error value, green = correct value)





/layer hidden when layer expands


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





to ignore opera less than 3 pixel problem ... It can be seen that if there is no absolute positioning of things, two values are equal, whichever does not matter.


But if there is, then the performance of each browser is not the same, whichever value is not correct. But you can find a rule that takes two values that are worth the maximum to be compatible with each browser. So our homepage code is going to be transformed into this:





function Reinitiframe () {var iframe = document.getElementById ("frame_content");





try{





var bheight = iframe.contentWindow.document.body.scrollHeight;





var dheight = iframe.contentWindow.document.documentElement.scrollHeight;





var height = Math.max (bheight, dheight);





iframe.height = height;





}catch (ex) {}





}





Window.setinterval ("Reinitiframe ()", 200); This basically solves the compatibility problem. By the way, not only the absolute positioning of the layer will affect the value, float will also cause the difference of two values.





If you demo demo, you will find that, in addition to IE, other browsers, when the layer is expanded and then hidden, the height of the value is maintained at the expanded height of 303, rather than hiding back to the true value of 184, that is, after the long height of the shrink back. This phenomenon can be changed between the included pages will also occur, when the high page to switch to the low page, the height is still the high value.


can be summed up when the iframe form height is higher than the actual height of the document, height is the form height, and when the form height is lower than the actual document height, the actual height of the document is taken. So, try to set the height to a value that is lower than the actual document before synchronizing the height. Therefore, in the IFRAME add onload= "This.height=100″, so that the page load when the first indent low enough, and then sync to the same height."


this value, in the actual application decision, short enough but not too short, otherwise in the FF and other browsers will have a very obvious flicker. The main page cannot be tapped on the DOM while the DOM is operating and the height becomes smaller.


in one of my actual projects, I did not do this because of the trade-off between cost and benefit, because each DOM function inserts this code, the price is too high, in fact, the shrink back is not so fatal. Including demo, also did not go to do this thing. If the reader has a better way, please let me know.





This is the final home page code:





<iframe id= "frame_content" src= "iframe_b.html" scrolling= "no" frameborder= "0" onload= "this.height=100" > </iframe>





<script type= "Text/javascript" >





function Reinitiframe () {





var iframe = document.getElementById ("frame_content");





try{





var bheight = iframe.contentWindow.document.body.scrollHeight;





var dheight = iframe.contentWindow.document.documentElement.scrollHeight;





var height = Math.max (bheight, dheight);





iframe.height = height;





}catch (ex) {}





}





Window.setinterval ("Reinitiframe ()", 200);





</script>