IFrame Height setting

Source: Internet
Author: User
Tags html page split

The adaptive height of the IFRAME, 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.

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

Start using the time is not good, and later found that because of JS Cross-domain problem, no permissions. Later set the Window.document.domain on it, using the jquery code 2 method.

Cross-domain iframe adaptive height

Cross-domain, because JS's homology policy, the parent page JS can not get to the height of the iframe page. Need a page to do the proxy. The
method is as follows: Suppose a page under www.a.com a.html to include a page under Www.b.com c.html.
We use another page under Www.a.com to act as proxies, to get the height of the IFRAME page and to set the height of the iframe element agent.html. The

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

Adds the following code to 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, put a section of JS in agent.html:
<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 Gets 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 it is not subject to JavaScript's homology restrictions when manipulating a.html)

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, one is placed on the test.html page.
Be careful not to put the wrong place.

Here are two other ways:
IFRAME code, note to write ID

<iframe src= "test.html" id= "main" width= "M" 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 call
$ ("#main"). Load (function () {
var mainheight = $ (this). Contents (). Find ("body"). Height () +30;
$ (this). Height (mainheight);
});

The second 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 on 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>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.