jQuery Plugin To Auto Adjust iFrame Height - setIframeHeight
File Size: | 17.4 KB |
---|---|
Views Total: | 5282 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

setIframeHeight is a jQuery plugin that automatically and responsively adjust the height of your cross-domain iframe according to its content. Works with multiple iframes (iframe in iframe) on one page.
See also:
- Responsive IFrames Plugin For jQuery
- jQuery Plugin For Auto Resizing iFrame - iframe Auto Height
- jQuery Plugin For Auto Resizing iFrame - iFrame Resizer
- Auto Resizing iFrame with jQuery rIframe Plugin
How to use it:
1. Include jQuery library and the jQuery set-iframe-height-parent.js script on the parent page.
<script src="jquery.min.js"></script> <script src="dist/set-iframe-height-parent.js"></script>
2. Include jQuery library and the jQuery set-iframe-height-child.js script on the iframe page.
<script src="jquery.min.js"></script> <script src="dist/set-iframe-height-child.js"></script>
3. Insert an iframe into the parent page.
<iframe scrolling="no" width="100%" src="inner.html"></iframe>
4. That's it. The plugin supports Deep Links if you want you parent url to be updated whenever the iframe url changes. Just add data-iframeAutoHeight-deepLinkPattern
attribute to the iframe.
<iframe scrolling="no" width="100%" src="inner.html" data-iframeAutoHeight-deepLinkPattern="/your-path/?iframe_target=%deepLinkIframeSrc%"></iframe>
5. Events.
jQuery(window) // triggered whenever the iframe got shrinked .on('setIframeHeight:shrinked', function (e, data) { console.log('iframe shrinked', data); window.scroll(0,0); }) // triggered whenever the iframe got enlarged .on('setIframeHeight:enlarged', function (e, data) { console.log('iframe enlarged', data); }) // triggered whenever the deep link is changed .on('setIframeHeight:deepLink:changed', function(e, data) { console.lg(data); // Object {childUrl: "http://..", parentUrl: "http://..."} })
This awesome jQuery plugin is developed by FaiblUG. For more Advanced Usages, please check the demo page or visit the official website.