Skip to content

Setup

The iframe-resizer project is distributed via separate packages for the parent and child pages. This guide takes you through setting up the parent and then child pages.

Parent Page Setup

In this section we detail how to setup the parent page using the Vanilla JavaScript version of iframe-resizer. The framework section of this guide details how to use iframe-resizer with a range of popular frameworks and libraries.

Install

Download and install the parent page package with one of the following options..

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

Usage

This library provided the function iframeResize() which accepts a config object and one or more iframes. Iframes can be passed via either CSS selector or reference. All these values are optional and if no iframe is provided, then it will bind iframe-resizer to all iframes currently contained on the page.

const iframes = iframeResize( [{options}], [css selector] || [iframe] )

Once the setup has run, an array of the iframes that have had iframe-resizer bound to them is returned.

Typical setup

The normal configuration is to have the iframe resize when the browser window changes size or the content of the iframe changes. To set this up you need to configure one of the dimensions of the iframe to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.

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

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.

API

The Parent Page API includes a range of options, events and methods to enable you to securely interact with both iframe-resizer and the child page.

Child Page Setup

The child page needs to load it’s own JavaScript package into the iframe, in order to enable communication with the parent page. The @iframe-resizer/child package is a small self-contained script with no dependencies. It is designed to be a good guest on someone else site and will only start running after receiving a message from the parent page.

Install

Download and install the child page package with one of the following options..

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

Usage

This package just needs to be included on every page that you load into the iframe. Where it will quietly listen for a message from the parent page, before initializing itself.

<script src="/node_modules/@iframe-resizer/child/index.umd.js"></script>

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 Performance and Trouble Shooting sections of this guide.

API

The Child Page API includes a range of settings, events and methods to enable you to securely interact with both iframe-resizer and the parent page.

Was this page useful?