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. 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@5.5.0"></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.0"></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.
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' }
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.