Setting up the Child Page

The child page needs to load its 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. It is designed to be a good guest on someone else’s 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..

npm install @iframe-resizer/child --save

pnpm add @iframe-resizer/child

yarn add @iframe-resizer/child

<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child@5.5.4"></script>

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
  async
  src="/node_modules/@iframe-resizer/child/index.umd.js"
></script>

import '@iframe-resizer/child'

require('@iframe-resizer/child')

<script
async
src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child@5.5.4"
></script>

Once everything is set up, 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 Troubleshooting sections of this guide.

License

If your iframe is designed to be hosted by third parties, then you can alternatively set the license key on the child page. This will also need to be included on every page hosted in your iframe.

window.iframeResizer = {
  license: "xxxx",
  onReady: () => console.log("iframe-resizer is ready"),
}

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 child page.