Small Project Longli the background management of multimedia classroom management system in middle school uses the IFRAME. Because you want to load content dynamically, you need an IFRAME that adapts to the height of the content page. Google search for a lot of answers, which succeeded in this code
Copy Code code as follows:
<script type= "Text/javascript" >
function Setcwinheight () {
var Iframeid = document.getElementById ("Maincontent1"); IFRAME ID
if (document.getElementById) {
if (Iframeid &&!window.opera) {
if (iframeid.contentdocument && iframeid.contentDocument.body.offsetHeight) {
Iframeid.height = Iframeid.contentDocument.body.offsetHeight;
else if (Iframeid. Document && Iframeid. Document.body.scrollHeight) {
Iframeid.height = Iframeid. Document.body.scrollHeight;
}
}
}
}
</script>
IFRAME Code:
Copy Code code as follows:
<iframe style= "Z-INDEX:1; Visibility:inherit; width:100%; "Name=" Maincontent1 "
Onload= "Javascript:setcwinheight ()" height= "1" id= "Maincontent1" src= "<%=resolveclienturl (" ~/message ")%>"
Marginwidth= "0" marginheight= "0" frameborder= "0" scrolling= "no" ></iframe>
IE8 under the successful implementation of adaptive height, but in Google browser height will only increase, will not be reduced, that is, long after the shrink back.
Then the performance of each browser is not the same, whichever value is wrong. 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:
Copy Code code as follows:
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);
In this way, the compatibility problem is basically solved. 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.
You can conclude that when the iframe form is taller than the actual height of the document, the height is the height of the form, and the actual height of the document is taken when the form is below the actual height of the document. 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 practical 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 in the trade-off between cost and benefit, because the code was inserted into every DOM function, and it was too expensive to shrink back and not be so deadly. Including demo, also did not go to do this thing. If the reader has a better way, please let me know.
/********************************** Original Quote End *****************************/
Please pay attention to the red sentence. Read here, I want to change iframe.height before you can give iframe.height a small enough initial value, such as iframe.height= "10px", And then change like Iframe.height. This solves the problem of the red part of the original text.
The final code is as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
function Setcwinheight () {
var Iframeid = document.getElementById ("Maincontent1"); IFRAME ID
Iframeid.height = "10px"; first give a small enough initial value, and then grow taller.
if (document.getElementById) {
if (Iframeid &&!window.opera) {
if (iframeid.contentdocument && iframeid.contentDocument.body.offsetHeight) {
Iframeid.height = Iframeid.contentDocument.body.offsetHeight;
else if (Iframeid. Document && Iframeid. Document.body.scrollHeight) {
Iframeid.height = Iframeid. Document.body.scrollHeight;
}
}
}
}
</script>
The IFRAME code remains unchanged:
Copy Code code as follows:
<iframe style= "Z-INDEX:1; Visibility:inherit; width:100%; "Name=" Maincontent1 "
Onload= "Javascript:setcwinheight ()" height= "1" id= "Maincontent1" src= "<%=resolveclienturl (" ~/message ")%>"
Marginwidth= "0" marginheight= "0" frameborder= "0" scrolling= "no" ></iframe>
After testing, the IFRAME in IE8, Google Browser 4.0 and firefox3.5.3 are successfully adaptive height.
