Set frame height dynamically using javascript

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.

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

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

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

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