WordPress

The iframe-resizer project is composed 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 to be included on 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 set up 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',
    log: 'collapsed',
  }, '#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',
    log: 'collapsed',
  });
</script>

Setting the initial height of the iframe 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.

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 its 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’s 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 set up, 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 Troubleshooting sections of this guide.