Why three talks
Why three talks? One is because this is really a badly talked about topic, and the other is because Master Tai wrote this article n years ago to talk about iframe adaptive height . The reason why I raise this question again is because I have indeed encountered all aspects of this problem in previous projects, and it is necessary to summarize it. I hope this helps you, please correct me if there are any mistakes.
The height of the same domain and sub-pages will not increase dynamically
This situation is the simplest. Just get the actual height of the subpage directly through the script and modify the height of the iframe element. But there are two points that must be noted:
If there are absolutely positioned elements in the page or there are no floating elements, the situation is a bit complicated. Different browsers have different processing results, even browsers with Webkit kernel. Please see this Demo for details. So you either do browser detection, you use Math.max to calculate a maximum value, or you think of something else.
The page contained in the iframe may be very large and require a long loading time. When calculating the height directly, it is likely that the page has not been downloaded, and there will be problems with the height calculation. So it's better to calculate the height in the iframe's onload event. It should also be noted here that the Microsoft event model obj.attachEvent must be used to bind the onload event under IE. Other browsers can also directly use obj.onload = function(){}.
(function(){
var _reSetIframe = function(){
var frame = document.getElementById("frame_content_parent")
try {
var frameContent = frame.contentWindow.document,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (bodyHeight != frame.height){
frame.height = bodyHeight;
}
}
catch(ex) {
frame.height = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}else{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
In the same domain, the height of subpages will increase dynamically, and the script may completely fail.
In the second example, script errors are taken into account, but if the script is not executed at all, the content in the iframe will not be displayed because the height of the iframe is not high enough. For this reason, we usually set a sufficient height in advance. For the convenience of front-end control, I think it is more appropriate to write it in a CSS file. When modification is needed, just change the CSS. Here I set selector{ height:1800px; }. It should be noted that the styles written in the style sheet cannot be retrieved directly using node.style[property]. For Microsoft models, node.currentStyle[property] must be used (digression: the tragic IE model does not support CSS pseudo-classes ), for the W3C model, use window.getComputedStyle(node,null)[property] to get it. I used YUI directly for the sake of convenience.
There is another problem here. When setting the height of the iframe to be greater than the height of the page it contains, each browser handles it differently. For example, under Firefox, the height of the body element must be calculated, and the height of the html element is equal to the height of the iframe. However, when the page happens to have absolute positioning and uncleared floating elements, it cannot be obtained through the body element. Obviously, the first method The disadvantages of the method are smaller. Please see this Demo for details.