Web Design tips: IFrame Adaptive height

Perhaps someone has not touched this problem, first of all, what is adaptive height bar. The so-called IFRAME adaptive height, that is, based on the interface aesthetic and interactive considerations, hiding the border and scrollbar iframe, so that people do not see it is an IFRAME. If the IFRAME always calls the same fixed height page, we can simply write dead iframe Heights. And if the iframe to switch pages, or included pages to do DOM dynamic operation, this time, you need the program to synchronize the height of the iframe and the actual height of the included page.

By the way, the IFRAME to use when it is forced to, it will lead to the front-end development of too much trouble.

There are roughly two traditional approaches:

Method one, after each contained page in its own content loaded, execute JS to get the height of this page, and then to sync the parent page of the iframe height.

Method Two, in the main page iframe in the OnLoad event to execute JS, to get the content of the page contains the height, and then go to sync height.

In terms of code maintenance, method Two is better than method one, because method one, each included page is to introduce a piece of the same code to do this thing, create a lot of copies.

Two methods are only to deal with static things, that is, only when the content loading, if JS to operate the DOM caused by the height of changes, are not very convenient.

If you do a interval in the main window, non-stop to get the height of the included page, and then do synchronization, is not convenient, but also solve the problem of JS Operation Dom? The answer is yes.

Demo page: Main Page iframe_a.html, included page iframe_b.htm and iframe_c.html

Main Page code example:

function Reinitiframe () {

var iframe = document.getElementById ("frame_content");

try{

Iframe.height = Iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex) {}

}

Window.setinterval ("Reinitiframe ()", 200);

The/script> has been implemented, will there be any problem with efficiency?

I did the test, opened 5 windows (IE6, IE7, FF, Opera, Safari) to execute this code, will not have any effect on the CPU, or even adjust to 2ms, also did not affect (basically maintain at 0% occupancy rate).

The following is a discussion of the compatibility of each browser, how to get to the right height, mainly on the Body.scrollheight and documentelement.scrollheight two worth comparison. Note This article is using this DOCTYPE, different DOCTYPE should not affect the results, but if your page does not declare DOCTYPE, it is better to add a bar first.

! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" the following test code is appended to the main page to output the two values, code example:

Check Height

function Checkheight () {

var iframe = document.getElementById ("frame_content");

var bheight = iframe.contentWindow.document.body.scrollHeight;

var dheight = iframe.contentWindow.document.documentElement.scrollHeight;

Alert ("Bheight:" + bheight + ", Dheight:" + dheight);

}

The/script> is loaded page, you can switch an absolutely positioned layer, so that the page height dynamic change. If the layer expands, the height of the page will be elevated. code example:

Toggle Overlay

/div>

Div style= "Height:160px;position:relative"

"Div id=" overlay "style=" position:absolute;width:280px;height:280px;display:none; >

/div>

Script Type= "Text/javascript"

function Toggleoverlay () {

var overlay = document.getElementById (' overlay ');

Overlay.style.display = (Overlay.style.display = = ' None ')? ' Block ': ' None ';

}

The/script> below lists the test values for the above code in each browser:

(Bheight = body.scrollheight, dheight = documentelement.scrollheight, red = error value, green = correct value)

/layer hidden when layer expands

Bheight dheight bheight Dheight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

Ignore opera 3 pixel less than others problem ... It can be seen that if there is no absolute positioning of things, two values are equal, whichever does not matter.

But if there is, then the performance of each browser is not the same, whichever value is wrong. But you can find a rule that takes two values that are worth the maximum to be compatible with each browser. So our homepage code is going to be transformed into this:

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); This basically solves the compatibility problem. By the way, not only the absolute positioning of the layer will affect the value, float will also cause the difference of two values.

If you demo demo, you will find that, in addition to IE, other browsers, when the layer is expanded and then hidden, the height of the value is maintained at the expanded height of 303, rather than hiding back to the true value of 184, that is, after the long height of the shrink back. This phenomenon can be changed between the included pages will also occur, when the high page to switch to the low page, the height is still the high value.

You can conclude that when the iframe form is taller than the actual height of the document, the height is the height of the form, and the actual height of the document is taken when the form is below the actual height of the document. So, try to set the height to a value that is lower than the actual document before synchronizing the height. Therefore, in the IFRAME add onload= "This.height=100″, so that the page load when the first indent low enough, and then sync to the same height."

This value, in practical application decision, short enough but not too short, otherwise in the FF and other browsers will have a very obvious flicker. The main page cannot be tapped on the DOM while the DOM is operating and the height becomes smaller.

In one of my actual projects, I did not do this in the trade-off between cost and benefit, because the code was inserted into every DOM function, and it was too expensive to shrink back and not be so deadly. Including demo, also did not go to do this thing. If the reader has a better way, please let me know.

This is the final home page code:

Script Type= "Text/javascript"

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);

/script>