Skip to content
iframe-resizer

Use With Third Party Websites

The iframe-resizer library has been designed to be a zero impact guest on third party or client websites. This page guides you through how to setup iframe-resizer in a way that allows you to control how the library runs after it has been included on another parties website.

Parent Page

Create Script

The recommended approach is to host a JS file on your site, based on the following example javascript. This code will create your iframe, then load and configure iframe-resizer.

load-iframe.js
;(function () {
  const log = 'collapsed'
  const width = '100%'
  const height = '100vh'
  const site = 'https://your-domain.com'
  const content = 'iframe-content.html'
  const parentScript = 'node_modules/@iframe-resizer/parent/index.umd.min.js'
  const license = 'your license key'


  // Create the iframe
  const iframe = document.createElement('iframe')
  iframe.src = `${site}/${content}`
  iframe.style.width = width
  iframe.style.height = height


  // Prepare options for iframe-resizer
  const options = { license, log, waitForLoad: true }


  // Load iframe-resizer parent script
  const script = document.createElement('script')
  script.src = `${site}/${parentScript}`
  script.async = true
  script.fetchPriority = 'high'
  script.onload = () => iframeResize(options, iframe)
  script.onerror = function () {
    console.error('Failed to load iframe-resizer library.')
  }


  // Insert after this script
  document.currentScript.after(iframe, script)
})()

This approach simplifies the setup for your client sites and allows you to control the version of iframe-resizer in use on both the parent and child pages in the future.

It is recommend that you minify this code using either Terser or UglifyJS.

Include Script

Once you have deployed the above script to your server, you can then ask external client websites to simply include the following on their page, at the location they wish to place the iframe.

<script async src="https://your-domain.com/load-iframe.js">

This will then create the iframe and configure iframe-resizer on their page.

Child Page

When displaying a third party iframe on your own site. You just need to ask the provider to include the child package anywhere on each of their webpages that you are displaying in your iframe. This can be either from your website, or jsDeliver. Self hosting this script has the advantage that you can upgrade to a future version without having to have the other party make changes to their site.

<script
  async
  src="https://your-site.com/node_modules/@iframe-resizer/child/index.umd.js"
></script>

The child package is designed to be a good guest on the sites that host it. As such it will not initialize until having first received a message from the parent page.

Was this page useful?