Skip to content
iframe-resizer

jQuery

Install

Download and install this package with one of the following options.

Terminal window
npm install @iframe-resizer/jquery --save

You will also need to ensure that the @iframe-resizer/child package has been loaded into the iframe.

Usage

Use jQuery to find the iframes on the page and then pass them to the iframeResize() method. The plugin will automatically filter out any non-iframe elements returned by jQuery.

<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script src="/node_modules/jquery/jquery.js"></script>
<script src="/node_modules/iframe-resizer/jquery/index.umd.js"></script>
<script>
  $('iframe').iframeResize({ license: 'xxxx', waitForLoad: true });
</script>

You can pass any of the standard Parent API options and events via this plugin.

Setting the initial height of the iframe to 100vh makes the loading in of the iframe appear smoother to the user, as they will only see the content below the iframe once it has completed loading and undergone it’s initial sizing.

The waitForLoad option defers sending a message to the iframe until after the onload event fires on the iframe. If their is any possibility that the iframe content could load before the JavaScript runs, then you should set this option to false.

Child page

You will then need to install the @iframe-resizer/child package on the page in the iframe.

Once everything is setup, keep an eye on the browser console, as iframe-resizer will warn about any potential issues it detects and provide advice on how to fix them. For more details on using iframe-resizer see the Advanced Setup and Trouble Shooting sections of this guide.

Was this page useful?