Setting up the Child Page

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

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

import '@iframe-resizer/child'

require('@iframe-resizer/child')

<script
  src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child"
  type="text/javascript"
  async
></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 Advanced Setup 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 child page.