Shulou(Shulou.com)06/03 Report--

Editor to share with you how to solve the problem of high degree of iframe adaptation in web design, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

Some people may not have been exposed to this problem, first explain what is the adaptive height. The so-called iframe adaptive height is that, based on the consideration of beautiful interface and interaction, the border and scrollbar of iframe are hidden, so that people can not see that it is an iframe. If iframe always calls a page with the same fixed height, we can just write down the height of iframe. If the iframe wants to switch pages, or the included page needs to do DOM dynamic operation, then the program needs to synchronize the iframe height with the actual height of the included page.

By the way, iframe is used only as a last resort, and it can cause too much trouble for front-end development.

There are roughly two traditional practices:

Method 1, after each included page has finished loading its own content, execute JS to get the height of the page, and then synchronize the iframe height of the parent page.

Method 2, execute JS in the onload event of the main page iframe to get the height content of the included page, and then synchronize the height.

From the point of view of code maintenance, method 2 is better than method 1, because method 1, each included page has to introduce the same piece of code to do this, creating a lot of copies.

Both methods only deal with static things, that is, they are only executed when the content is loaded, and it is not convenient for JS to manipulate the height changes caused by DOM.

If you do an Interval in the main window, keep getting the height of the included page, and then synchronize, is it convenient and solve the problem of JS operating DOM? The answer is yes.

Demo page: the main page iframe_a.html, which contains pages iframe_b.htm and iframe_c.html

Example of the main page code:

The code is as follows:

< iframe id= "frame_content" src= "iframe_b.html" scrolling= "no" frameborder= "0" > < / iframe > < script type= "text/javascript" >

Function reinitIframe () {

Var iframe = document.getElementById ("frame_content")

Try {

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

} catch (ex) {}

}

Window.setInterval ("reinitIframe ()")

< / script >

Will there be a problem with efficiency if it is carried out all the time?

I tested and opened five windows (IE6, IE7, FF, Opera, Safari) to execute this code, which had no effect on CPU, or even adjusted to 2ms (basically maintained at 0% occupancy).

Let's talk about the compatibility of various browsers and how to get the right height, mainly for body.scrollHeight and documentElement.scrollHeight. Note that this doctype is used in this article. Different doctype should not affect the result, but if your page does not declare doctype, add one first.

The code is as follows:

appends the following test code to the main page to output these two values, code example:

< div > < button > Check Height < / button > < / div > < script type= "text/javascript" >

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)

}

< / script > when the page is loaded, you can change the height of the page dynamically by switching an absolute positioning layer. If the layer expands, it will prop up the page height. Code example:

< div > < button > Toggle Overlay < / button >

< / div >

< div >

< div id= "overlay" > < / div >

< / div >

< script type= "text/javascript" >

Function toggleOverlay () {

Var overlay = document.getElementById ('overlay')

Overlay.style.display = (overlay.style.display = = 'none')? 'block': 'none'

}

< / script >

The test values of the above code in each browser are listed below:

The code is as follows:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, red = wrong value, green = correct value)

/ when the layer is hidden, when the layer is expanded

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 the problem that Opera is 3 pixels less than others for the time being. As you can see, if there is no absolute positioning, the two values are equal, and it doesn't matter which one.

But if there is, then the performance of each browser is not the same, and it is wrong to take either value. But you can find a rule, that is, take two worthwhile maximum values to be compatible with browsers. So our main page code is going to look like this:

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 ()")

In this way, the compatibility problem has been basically solved. By the way, not only does the absolute positioning of the layer affect the value, but float also causes the difference between the two values.

If you demonstrate Demo, you will find that in other browsers except IE, when the layer is expanded and then hidden, the height value is still maintained at the expanded height of 303, rather than the real hidden value of 184. that is to say, you can't shrink back when you grow taller. This phenomenon also occurs when switching between different included pages, and when switching from a high page to a short page, the height is the same as that 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 the height of the form, and when the height of the form is lower than the actual height of the document, it is 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. So, add onload=this.height=100 to iframe so that when the page loads, it shrinks to low enough, and then synchronizes to the same height.

This value, determined in practical applications, is short enough but not too short, otherwise there will be obvious flashes in browsers such as FF. During the DOM operation, the main page cannot be heard, so the height can only be reduced after the DOM operation.

In one of my actual projects, I didn't do this between cost and benefit, because it was too expensive to insert this code into every DOM function, and it was not so fatal to shrink the layer. Including Demo, also did not do this thing. If the reader has a better way, please let me know.

This is the code for the final main page:

[/ code]

< iframe id= "frame_content" src= "iframe_b.html" scrolling= "no" frameborder= "0" > < / iframe >

< 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 ()")

< / script >

[/ code]

These are all the contents of this article entitled "how to solve the problem of high degree of iframe adaptation in web design". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.