Summary of iframe height setting, IFrame adaptive Height method

The adaptive height of the IFRAME, that is, based on the appearance of the interface and interactive considerations, hiding the IFrame border and scrollbar, so that people do not see it is an IFRAME. If the IFRAME always calls the same fixed height page, we can write the dead iframe height directly. If the IFRAME is to switch pages, or if the page is included to do DOM dynamic operation, then the program needs to synchronize the iframe height and the actual height of the included page.

If the height of the IFRAME is not determined, it will be the initial height.
An IFRAME is part of a Web page, and its size is limited by the Web page, and can be set up to use height= "100%".
Basically solve the iframe out of the height is added to the scroll bar to achieve, very simple, if the information in your iframe beyond a screen, you must use the scroll bar.

Start using the time is not good, and later found that because of JS cross-domain issues, no permissions. Later set up the Window.document.domain can be, with the jquery code 2 method.

Adaptive height of iframe under cross-domain

Cross-domain time, because of the same origin of JS policy, the parent page JS can not get to the height of the iframe page. Need a page to do the proxy.
Here's how: Suppose a page under www.a.com a.html to include a page c.html under Www.b.com.
We use another page agent.html under Www.a.com to do the proxy, which gets the height of the IFRAME page and sets the height of the IFRAME element.

The a.html contains an iframe:
<iframe src= "http://www.b.com/c.html" id= "iframe" frameborder= "0" scrolling= "no" style= "border:0px;" ></iframe>

Add the following code to the c.html:
<iframe id= "c_iframe" height= "0" width= "0" src= "http://www.a.com/agent.html" style= "Display:none" ></iframe >
<script type= "Text/javascript" >
(function Autoheight () {
var b_width = Math.max (document.body.scrollwidth,document.body.clientwidth);
var b_height = Math.max (document.body.scrollheight,document.body.clientheight);
var c_iframe = document.getElementById ("C_iframe");
C_IFRAME.SRC = c_iframe.src+ "#" +b_width+ "|" +b_height;
})();
</script>

Finally, agent.html into a section JS:
<script type= "Text/javascript" >
var b_iframe = window.parent.parent.document.getElementById ("iframe");
var hash_url = Window.location.hash;
if (Hash_url.indexof ("#") >=0) {
var hash_width = Hash_url.split ("#") [1].split ("|") [0]+ "px";
var hash_height = Hash_url.split ("#") [1].split ("|") [1]+ "px";
B_iframe.style.width = Hash_width;
B_iframe.style.height = Hash_height;
}
</script>
Agent.html the width and height values from the URL and sets the height and width of the IFRAME (because agent.html is under www.a.com, so the operation A.html is not limited by the same origin of JavaScript)

Super simple method, also need not write what Judge browser height, width what.
Here are two ways to do it. One is placed on the same page as the IFRAME, and one is placed on the test.html page.
Be careful not to put the wrong place.

There are two other methods:
IFRAME Code, note to write ID

<iframe src= "test.html" id= "main" width= "" height= " "frameborder=" 0 "scrolling=" Auto "></IFRAME>

jquery code 1:

// Note the following code is placed in the test.html call
$ (window.parent.document). Find ("#main"). Load (function () {
var main = $ ( window.parent.document). Find ("#main");
var thisheight = $ (document). Height () +30;
Main.height (thisheight);
});

jquery code 2:

//NOTE: The following code is placed on the same page as the IFRAME called
$ ("#main"). Load (function () {
var Mainheight = $ (this). Contents (). Find ("body"). Height () +30;
$ (this). Height (mainheight);
});  

The second is effective, but note that the added JS to write under the IFRAME, put in the head is the test has no effect.
Test code:
<iframe id= "mainframe" name= "mainframe" marginwidth= "0" marginheight= "0" src= "/home/activitylist" frameborder= "0" Width= "100%" scrolling= "no" height= "100%" ></iframe>
<script type= "Text/javascript" >
Note: The following code is placed in the same page as the IFRAME call, placed under the IFRAME
$ ("#mainframe"). Load (function () {
var mainheight = $ (this). Contents (). Find ("body"). Height () + 30;
$ (this). Height (mainheight);
});
</script>

Transferred from: http://www.cr173.com/html/28045_1.html

Summary of iframe height setting, IFrame adaptive Height method