Ifram framework adaptive content height (code is easy to understand ie7, 8, 9, Firefox, Google all tested)

The height of the Self-adaptive content in the Ifram framework is a problem that has plagued me for a long time. Today I have time to take out the previous Code and study it. Recently I am working on a project, I often use the JQ method. I found the method:

 

This was previously found online and only supports IE7: the code is as follows:

<Script language = "javascript">
Function SetCwinHeight () // auto-stretch
{
Var xsun = document. getElementById ("main"); // iframe id
If (document. getElementById ){
If (xsun &&! Window. opera ){
If (xsun. contentDocument & xsun. contentDocument. body. offsetHeight ){
Xsun. height = xsun. contentDocument. body. offsetHeight + 20;
} Else if (xsun. Document & xsun. Document. body. scrollHeight ){
Xsun. height = xsun. contentDocument. body. offsetHeight + 20;
}
}
}
}
</Script>

 

The modified code:

<Script language = "javascript">
Function SetCwinHeight () // auto-stretch
{
Var xsun = document. getElementById ("main"); // iframe id
// Var h1 = xsun. contentDocument. body. offsetHeight;
Var h2 = document.doc umentElement. offsetHeight;
If (document. getElementById ){
If (xsun &&! Window. opera ){
If (xsun. contentDocument & h2 ){
Xsun. height = h2 + 20;
} Else if (xsun. Document & xsun. Document. body. scrollHeight ){
Xsun. height = h2 + 20;
}
}
}
}
</Script>

We should be able to clearly see the difference, that is, var h1 = xsun. contentDocument. body. offsetHeight;
Var h2 = document.doc umentElement. offsetHeight;

The obtained height from h1 is 0, and h2 is the correct height. What is the specific meaning? I will know the difference between the two when I go to Baidu.

Call method:

<Iframe frameborder = "0" id = "main" name = "main" onload = "javascript: SetCwinHeight ();"
Src = "xsun.html" marginwidth = "0" marginheight = "0" scrolling = "no" style = "z-index: 1;
Width: 100%; min-height: 300px; "> </iframe>