Thursday, April 11, 2013

Calculate dynamic height of iFrame | how to calculate content height of iFrame | Acces iframe parent tag id

Using iFrame is very wrong approach to achieve any functionality. But due to some reasons we have to use iframe in our application.

After using iframe in application our main problem becomes that how to give it dynamic height. As we all know that in dynamic site we can't fix our content height. after long time gooling i found best script which can set its height after calculating its content height.

Not only you can set its height according to its height also you can change attribute of iframe parent ID also.

I hope this will help to work with iframe and make your task easy.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
   
        function resizeIframe(iframeID) {
            var iframe = window.parent.document.getElementById(iframeID);
            var container = document.getElementById('content');
            iframe.style.height = container.offsetHeight + 'px';
        } 
    </script>
</head>
<body>
    <div id="content">
        What I have done in the past is use a trigger from the iframe'd page in window.onload
        (NOT domready, as it can take a while for images to load) to pass the page's body
        height to the parent.What I have done in the past is use a trigger from the iframe'd
        page in window.onload (NOT domready, as it can take a while for images to load)
        to pass the page's body height to the parent.What I have done in the past is use
        a trigger from the iframe'd page in window.onload (NOT domready, as it can take
        a while for images to load) to pass the page's body height to the parent.What I
        have done in the past is use a trigger from the iframe'd page in window.onload (NOT
        domready, as it can take a while for images to load) to pass the page's body height
        to the parent.What I have done in the past is use a trigger from the iframe'd page
        in window.onload (NOT domready, as it can take a while for images to load) to pass
        the page's body height to the parent.</div>
    </div>
    <script type="text/javascript">
        resizeIframe('slideshow_frame');
    </script>
</body>
</html>

Just copy and paste this code block in your iframe.

I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.

No comments: