If you are working with Iframes then definitely you
might experience the auto height resizing problem. For all of
you Here is a Simplest Tutorial which will solve the Iframe
resize problem on the fly.
The Problem :
Lets say, We have Two Pages Parent Page and Child
Page. You want to load Child Page in the Parent Page in the
form of Iframe. But, the Height of Child page is dynamic.
This is not possible by using Height auto in css. we have to
Adjust the Child Iframe height accordingly using Javascript.
The Solution :
The Solution for this Problem Do got Two Scenario’s
1. When Parent Page and Child page Both are in the Same Domain
2. When Parent Page and Child page Both are in different Domains
In the above Scenario’s Solution looks similar But to
Acheive we have to do a Extra call and We need a Extra Page
when The Parent page and Child page are in different Domains .
Lets get into the Solution by Scenario basis.
1. When Parent Page and Child Page are in Same Domain
To resize the Iframe height in this scenario is quiet simple all we need to do have 2 JS functions.
callResize() and resizeIframe ()
We will make use of this callResize() in Child page and we will make use of the resizeIframe() in Parent page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| < script type="text/javascript" >
// Call reSize
function callResize()
{
// get the Body height of the iframe page
var height = document.body.scrollHeight;
// send a request to parent to reset the height of the height
parent.resizeIframe(height);
}
// call this function on page load
window.onload =callResize;
</script>
|
So, that was Script tag which we will place in the iframe page
1
2
3
4
5
6
7
8
| <script type="text/javascript">
// reSize Iframe when ever child calls it
function resizeIframe(dynheight)
{
document.getElementById("childframe").height=parseInt(dynheight)+10;
}
</script>
|
Place this function in parent page. You are DONE .. SCENARIO 1 Complete
Here is the Complete Example Page.
Iframe Page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
function callResize()
{
var height = document.body.scrollHeight;
parent.resizeIframe(height);
}
window.onload =callResize;
</script>
</head>
<body>
<h2>This is Iframe</h2>
<br/>
<br/>
<br/>
<br/><br/><br/>
<br/><br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/><br/>
<h2> This is Final </h2>
</body>
</html>
|
Parent Page ::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
function resizeIframe(dynheight)
{
document.getElementById("childframe").height=parseInt(dynheight)+10;
}
</script>
</head>
<body>
<iframe id="childframe" src="iframe.php" frameborder="no" scrolling="no" />
</body>
</html>
|
1. When Parent Page and Child Page are in Different domain
Hmm, When Both the Pages are in Different Domains, We need
to Take a Help of Another Page which should be present in
the Same Domain as parent to Resize The Iframe Height.
So, We Require to add our small JS Functions 3 pages
1. Parent Page in Domain X
2. Child Page in Domain Y
3. Helper Page in Domain X
Why we require Helper page is, If we try to call
parent.resizeIframe() function from the page which is in Domain Y
we will get Permission Denied as they are in Different Domains
( Cross Domain Problem)
So, In this Scenario we will achieve our requirement Just By Adding a Empty Iframe Tag into the Child Page and passing the height of the Child Page as a Query String Parameter
So, In this Scenario we will achieve our requirement Just By Adding a Empty Iframe Tag into the Child Page and passing the height of the Child Page as a Query String Parameter
Javascript Functions we will use for this scenario
resizeIframe() Function as same as in the above scenario
1
2
3
4
5
6
7
| <script>
// Resize iframe
function resizeIframe(dynheight)
{
document.getElementById('frame_name_here').height = parseInt(height)+10;
}
</script>
|
Call reSize Function, This will change a Little. Just above
the Script tag we need to add a Iframe tag and here we wont
call parent.resizeIframe because of cross domain problem instead we
will update the Helper url with height as a query string
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<iframe id="helperframe" height="0" width="0" ></iframe>
< script type="text/javascript" >
// Call reSize
function callResize()
{
// get the Body height of the iframe page
var height = document.body.scrollHeight;
var helper = document.getElementById('helperframe');
// Send height to the Domain X as a Query String and Do not forget to add a random parameter
helper.src = "http://www.DomainX.com/helperpage.html?h="+height+"&r="+Math.random();
}
// call this function on page load
window.onload =callResize;
</script>
|
Now, Call the Resize Iframe from the Helper Page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
window.onload = parentIframeResize;
</script>
|
Scenario 2 is also DONE ..
Example Pages for Scenario 2
Parent Page in DomainX.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
function resizeIframe(dynheight)
{
document.getElementById("childframe").height=dynheight;
}
</script>
</head>
<body>
<iframe id="childframe" src="http://www.DomainY.com/iframe.php" frameborder="no" scrolling="no" />
</body>
</html>
|
Child Page in DomainY.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
function callResize()
{
var height = document.body.scrollHeight;
var helper = document.getElementById('helperframe');
helper.src = "http://www.DomainX.com/helper.html?h="+height+"&r="+Math.random();
}
window.onload =callResize;
</script>
</head>
<body>
<iframe id="helperframe" height=0 width=0></iframe>
<h2>This is Iframe</h2>
<br/>
<br/>
<br/>
<br/><br/><br/>
<br/><br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/><br/>
<h2> This is Final </h2>
</body>
</html>
|
Helper Page in Domain X.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<body >
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
window.onload = parentIframeResize;
</script>
</body>
</html>
|
