Small accumulation of html-.-iframe adaptive height_html/css_WEB-ITnose

When making system frameworks, iframes are often used. When the requirement is that vertical scroll bars cannot appear in iframes, they need to be extended consistently according to the height of the loaded page. However, the problem of height adaptation of iframes is more troublesome. At that time, I also struggled with it for a long time.

Option 1: When encountering a page nested in an iframe (hereinafter referred to as an inner page), the height of the inner page will not change. If it only needs to be adapted when it is loaded for the first time, just set the iframe. Now, compatible with ie6 and Google.

eg:

Solution 2: If you encounter a disgusting situation, after loading the height of the iframe for the first time, the height of the inner page will still change. At this time, you can only monitor the height of the inner page in real time. If the height of the inner page changes, then Reset the height of iframe through js.

eg:

function setHeight() {

var iframe = document.getElementById("iframe_content");
try {
var aHeight = iframe.contentWindow.document .body.scrollHeight;
var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.min(aHeight, bHeight);//Take the highest value;
iframe.height = height ;
　　　} catch (e) {}
　　}
　　window.setInterval("setHeight()", 200);

　 Summary: In fact, the principle of option 1 is to load the inner page Then calculate the height and then set the height of the iframe. Option 2 is to monitor the inner page and then set the height of the iframe. Of course, I still recommend that you don’t use iframes if you can. If there is a better iframe adaptive height solution, please leave me a message to communicate and make progress together!