Web Development Blog
Web Design Blog


Web Development Blog

R

ead and contribute on what is new and trending in the web design and web development community. We hope you frequent this blog and comment as well as mention any trends you find interesting.

 

Cross Domain or Same Domain iFrame Automatic Resizing based on Content - Web Development Blog


Return to the Blog

Cross Domain or Same Domain iFrame Automatic Resizing based on Content

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.

 
 
Posted by iFrame Resizing on Thursday, August 21, 2014 at 16:33




Please leave us a comment or ask a question below:

comments powered by Disqus



Back Home

Powered by Los Angeles Web Design
Copyright ©2004 - 2012 Hieroweb Interactive

To discuss your web design and marketing needs use our contact form or call us at 805-582-2081. Top

 

Related Pages