WordPress

The iframe-resizer project is comprised of separate JS files for the parent and child pages. This guide takes you through setting up the parent and then child pages in WordPress.

Install

Download the latest version of iframe-resizer.zip. This contains three JavaScript files, for the parent page you can choose between the vanilla JS (iframe-resizer.parent.js) and jQuery (iframe-resizer.jquery.js) versions. Finally the third file (iframe-resizer.child.js) needs placing in every page shown in your iframe.

You then need to upload these files to /wp-admin/js on your WordPress server and ensure they have public read access.

Parent Page

In this section we detail how to setup the parent page.

Usage

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.

Vanilla JS
jQuery

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

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

<script src="/wp-admin/js/iframe-resizer.parent.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>

<script src="/wp-admin/js/iframe-resizer.jquery.js"></script>
<script>
  $('#myIframe').iframeResize({ license: "xxxx", waitForLoad: true });
</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 their 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' })

Child Page

The child page needs to load it’s own JavaScript package, to enable communication with the parent page. This 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.

Usage

The following line then needs to be added to every page shown in the iframe.

<script src="/wp-admin/js/iframe-resizer.child.js"></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.