Cross Domain or Same Domain iFrame Automatic Resizing based on Content

The Myiframe.zip app contains what you need to get your iFrames to resize based on the content that is served within the content page(s). These scripts will work on same-domain, or cross-domain setups. iFrame-Test.html is the containing page that houses the iframes. There are 4 pages in this example that are linked content pages (frame.content.html, frame.content2.html, frame.content3.html, and frame.content4.html).


The script called "iframeSize.min.js" runs on the main container page iFrame-Test.html, and the scipt called "iframeContent.min.js" runs on all the content pages being served by the iFrame.


On the main iFrame-Test.html page towards the bottom of the page if you turn on the webconsole log by setting it to true you can use the console to walk through the code along with having the parameters written to the page.


The example at: http://www.christopherpadavick.com/iFrame-Test.html uses a cross-domain setup .


This mini iFrame app allows for automatic resizing of the height and width of both same domain and cross domain iFrames to scale to the contained content. PostMessage is used to pass messages between the host page and the iFrame and when available MutationObserver is used to detect DOM changes, with a fallback to setInterval for IE8-10, and it is fully responsive.