Compatible with iframe adaptive height of multiple browsers (ie8, Google Chrome 4.0, and firefox3.5.3)

Iframe is used for background management in the multimedia classroom management system of longli Middle School. to dynamically load content, iframe must be used to adapt the height of the Content Page. I found a lot of answers using Google. The successful answer is this code.
Copy codeThe Code is 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 codeThe Code is 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>

In IE8, the adaptive height is successfully realized, but the height of Google browsers only increases and will not decrease. That is to say, the height cannot be reduced.
In this case, 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:
Copy codeThe Code is as follows:
Function reinitIframe () {var iframe = document. getElementById ("frame_content ");
Try {
Var bHeight = iframe.content20.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.
/*********************************** End of the original article reference ** ***************************/
Note the red sentence. here, I want to change the iframe. can I give iframe before height. height assigns an initial value that is small enough, such as iframe. height = "10px", and then change it, for example, iframe. height. this solves the problem of the red part of the original text.
The final code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function SetCwinHeight (){
Var iframeid = document. getElementById ("maincontent1"); // iframe id
Iframeid. height = "10px"; // first give an initial value that is small enough 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 codeThe Code is 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>

Iframe has been tested in ie8, Google Chrome 4.0, and firefox3.5.3.