Open Iframe Resizer

Overview

A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.

If you found this plugin helpful, please consider starring the repository!

Getting Started

Browser (ES6 modules)

<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";

  initialize({}, "#my-iframe");
</script>

You can found a working example here

Package

Note you can also install the core package through npm:

npm install @open-iframe-resizer/core

React

A React component is also available:

npm install @open-iframe-resizer/react

Notes

Performing actions after a resize

You can execute a custom function after an iframe has been resized. Also, you can use built-in functions like updateParentScrollOnResize to help keep the iframe within the viewport after resizing:

import { initialize, updateParentScrollOnResize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";

initialize({ onIframeResize: updateParentScrollOnResize }, "#myIframe");

Resize iframes from a different origin

• If you have control over the embedded page, you need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child; loading the module is sufficient).

  Here is an example of the parent page and the child.

• If you have no control over the child iframe domain, and, by chance, the child page loads the legacy iframe-resizer script, you can initialize the library with the compatibility mode; it will try to connect to the child iframe:

  initialize({ enableLegacyLibSupport: true }, "#my-iframe");

Comparison with iframe-resizer

This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free. I decided to replicate some parts of the API, as it may facilitate migration to this project.

Some features from this library are missing, but they could be implemented in future versions.

Browser support

| Chrome | Safari | Firefox | Opera | IE | |--------|--------|---------|-------|-------| | 64+ | 13.1+ | 69+ | 51+ | 🙅‍♂️ |