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', '#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" });
</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.

For open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in an open-souce project set the license option 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 Performance and Trouble Shooting sections of this guide.