jQuery Plugin To Auto Adjust iFrame Height - setIframeHeight

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.