Auto reSizing Iframe height in the Page

Be the first to comment!
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
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>
Categories: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)