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 on the next page there is a guide to setting up child pages.

In this section we detail how to set up 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@5.5.9"></script>

Usage

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

const iframes = iframeResize( [{options}], [css iframeSelector] || [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, set one of the iframe’s dimensions to a percentage and tell the library to update only the other dimension. Normally, you 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',
    log: 'collapsed',
  }, '#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'

const options = {
  license: 'xxxx',
  log: 'collapsed',
}

const iframeSelector = '#myIframe'

iframeResize(options, iframeSelector)

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

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

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

const options = {
  license: 'xxxx',
  log: 'collapsed',
}

const selector = '#myIframe'

iframeResize(options, selector)

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

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

<!-- replace '@5.5.9' below with the version you wish to use. -->
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@5.5.9"></script>
<script>
iframeResize({
  license: 'xxxx',
  log: 'collapsed',
}, '#myIframe')
</script>

Setting the initial iframe height to 100vh makes loading appear smoother to the user, as they will only see the content below the iframe once it has completed loading and undergone its initial resizing.

If you wish to place your iframe on someone else’s website, then you should follow the Third Party setup guide.

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.