Set iFrame Height To Fit Its Content - jQuery frameLoader

The frameLoader jQuery UI widget is used to handle automatically resizing an iFrame based on the content height of the iFrame. If the height of the iFrame is known at different widths, then this could be handled purely through CSS and media queries. frameLoader is meant to handle those scenarios where the height of the iFrame content may not be known.

The plugin requires the windowMessenger to communicate between windows (iFrame and parent container) using the browser window's postMessage() method.

How to use it:

1. Load the needed JavaScript libraries in your html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/windowMessenger.js"></script>

2. Insert the JavaScript file frameLoader.js into the webpage and specify the source to be loaded into the iframe.

<script src="frameLoader.js" data-source="frame.html"></script>

3. More HTML data attributes:

• data-classes: additional CSS class(es)
• data-height: initial height
• data-margin: this refers to the amount of space that frameLoader will apply extra at the bottom of the iFrame height when the actual height cannot be directly determined. 

Change log:

2018-03-01

• Safari Support, SRC Change Detection, & Additional Resize Detection

---

This awesome jQuery plugin is developed by dbudde. For more Advanced Usages, please check the demo page or visit the official website.