height according to the content Archives

Hi Geeks,
As I faced the problem in so many times for Set Iframe height dynamically using javascript or setting the Iframe height as per its content, If we add the fix height to Iframe tag directly then it just show the scrollbar in that height but sometime we don’t want to show the scrollable area in that Iframe then there are so complex situation to set the Iframe height for dynamic content and the height may vary or Iframe on content coming from database or any other source.

Now we don’t know that what exactly the height of iframe due to its dynamic content, I have tried So many solution for it and finally i left the issue and provide static height to Iframe, i tried all DOM related access manipulations and it just failed due to cross origin and CORS violation issues.
But one day for my selfishness in one project i faced same requirement with an Iframe and if i use the Iframe then it was saving my lot of time So i researched for 4-5 hours and finally i got perfect solution for it.
SOLUTION :

We need to implement the channel communication between parent window and Iframe window by passing the messages . It will work for same or cross domain origins

Note : we should have access for the Iframe source page.

we’ll post a message from the Iframe source page having a height value to the client domain
by using following script

<script>

  // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>

// all content including images has been loaded

window.onload = function() {

// post our message to the parent

window.parent.postMessage(

// get height of the content

document.body.scrollHeight

// set target domain

,"*"

)

};

</script>

Now where you are creating Iframe ,Go to that page
Like your Iframe is having like that

<iframe id="MY_IFRAME_ID" width="100%" style="overflow-x:hidden;overflow-y:hidden;" frameBorder="0" 
scrolling="no" src="https://www.my-bla-bla-url.com/my-bla-bla-page.html" ></iframe>

1 2	<iframe id="MY_IFRAME_ID" width="100%" style="overflow-x:hidden;overflow-y:hidden;" frameBorder="0" scrolling="no" src="http://www.my-bla-bla-url.com/my-bla-bla-page.html" ></iframe>

we have putted dummy url and set the style to overflow hidden and set frameborder as 0 .
and passed width as 100% but didn’t passed the height
so for getting calculated the height automatic please put the script as follow

<script>
 // browser compatibility: get method for event 
    // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
    var myEventMethod = 
        window.addEventListener ? "addEventListener" : "attachEvent";
    // create event listener
    var myEventListener = window[myEventMethod];
    // browser compatibility: attach event uses onmessage
    var myEventMessage = 
        myEventMethod == "attachEvent" ? "onmessage" : "message";
    // register callback function on incoming message
    myEventListener(myEventMessage, function (e) {
        // we will get a string (better browser support) and validate
        // if it is an int - set the height of the iframe #my-iframe-id
        if (e.data === parseInt(e.data)) 
            document.getElementById('MY_IFRAME_ID;).height = e.data + "px";
    }, false);
 
</script>

// browser compatibility: get method for event

// addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)

var myEventMethod =

window.addEventListener ? "addEventListener" : "attachEvent";

// create event listener

var myEventListener = window[myEventMethod];

// browser compatibility: attach event uses onmessage

var myEventMessage =

myEventMethod == "attachEvent" ? "onmessage" : "message";

// register callback function on incoming message

myEventListener(myEventMessage, function (e) {

// we will get a string (better browser support) and validate

// if it is an int - set the height of the iframe #my-iframe-id

if (e.data === parseInt(e.data))

document.getElementById('MY_IFRAME_ID;).height = e.data + "px";

}, false);

</script>

This script will recieve the message passed from Iframe source origin and add the height of iframe dynamically .
Note : MY_IFRAME_ID is the id of Iframe we assumed , you can replace it with your Iframe id in Iframe and script both

Please comment below if you have any query related to this post or feature

Tag: height according to the content

Set frame height dynamically using javascript