Setting up the Parent Page

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

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 there is also a separate version of this guide for WordPress.

Install

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

npm install @iframe-resizer/parent --save

pnpm add @iframe-resizer/parent

yarn add @iframe-resizer/parent

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

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',
    waitForLoad: true,
  }, '#myIframe' );
</script>

<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>

<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>

import iframeResize from '@iframe-resizer/parent'

iframeResize({ license: 'xxxx', waitForLoad: true }, '#myIframe' );

<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>

<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>

const iframeResize = require("@iframe-resizer/parent");

iframeResize({ license: 'xxxx', waitForLoad: true }, '#myIframe' );

<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>

<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>

<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent"></script>
<script>
  iframeResize({
    license: 'xxxx',
    waitForLoad: true,
  }, '#myIframe');
</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.

The waitForLoad option defers sending a message to the iframe until after the onload event fires on the iframe. If there is any possibility that the iframe content could load before the JavaScript runs, then you should set this option to false.

For non-comercial open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in a compatable project set the license to GPLv3.

iframeResize({ license: 'GPLv3' })

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