Summary of iframe height setting, IFrame adaptive Height method

Source: Internet
Author: User

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 a.html to include a page c.html under
We use another page agent.html under 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= "" 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= "" 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;

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"; = Hash_width; = Hash_height;
Agent.html the width and height values from the URL and sets the height and width of the IFRAME (because agent.html is under, 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);

Transferred from:

Summary of iframe height setting, IFrame adaptive Height method

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: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.