Compatible with multi-browser iframe adaptive height (ie8, Google Chrome 4.0 and firefox3.5.3)_javascript skills

The small project Longli Middle School Multimedia Classroom Management System uses iframe in the backend management. Since content needs to be loaded dynamically, the iframe needs to adapt to the height of the content page. I found many answers using Google, and the successful one is this code

Copy code The code is as follows:

iframe code :

Copy code The code is as follows:

Successful under IE8 Implement adaptive height, but in Google Chrome the height will only increase, not decrease, that is to say, it will not shrink back after growing taller.
Then the performance of each browser is not the same, and no single value is correct. . But a rule can be found, that is, taking the maximum of two values ​​​​can be compatible with various browsers. So our main page code will be transformed into this:

Copy code The code is 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 absolutely positioned layer will affect the value, float will also cause the difference between the two values.
If you show the Demo, you will find that in other browsers except IE, when the layer is expanded and then hidden, the height value obtained is still maintained at the expanded height of 303, rather than the real value of 184 when hidden, that is He said that after he grows taller, he cannot shrink back. This phenomenon also occurs when switching between different included pages. When switching from a tall page to a short page, the height obtained is still the high value.
It can be summarized as follows: when the height of the iframe form is higher than the actual height of the document, the height is taken as the height of the form, and when the height of the form is lower than the actual height of the document, the height of the iframe is taken as the actual height of the document. Therefore, find a way to set the height to a lower value than the actual document before synchronizing the height. Therefore, add onload="this.height=100" to the iframe, so that when the page is loaded, it will first be shortened to a short enough height, and then synchronized to the same height.
This value is determined in actual applications. It should be short enough but not too short, otherwise there will be obvious flickering in browsers such as FF. The main page cannot monitor the DOM operation, and can only reduce the height after the DOM operation is completed.
In one of my actual projects, I did not do this because of the trade-off between cost and benefit, because this code had to be inserted into every DOM function, which was too costly. Not that deadly. Even in the Demo, this was not done. If readers have a better way, please let me know.
/************************************End of original quote********* ********************** /
Please pay attention to the red sentence. After reading this, I wonder if I can assign iframe.height first before changing iframe.height. An initial value that is small enough, such as iframe.height="10px", and then changed to iframe.height. This solves the problem of the red part of the original text.
The final code is as follows:

Copy the code The code is as follows:

iframe code still doesn’t Change:

Copy code The code is as follows:

After testing, iframe successfully adapts to height in IE8, Google Chrome 4.0 and Firefox3.5.3.