Sharing an iframe with third parties

This is a quick setup guide that details how to create a simple javascript file that you can share with third parties that wish to include you iframe on their own sites.

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, without having to go back to your clients and ask them to make changes to their sites.

License

Set the License Key, along side any other Settings and Events you wish to use from the Child Page API. This will need to be included alongside the child page javascript file on every page you display in the iframe.

window.iframeResizer = { license: "xxxx" }

Create a setup script

This code will create your iframe with the link to your content, then load and configure iframe-resizer.

; (function () {
  // URL of the site where the iframe content is hosted
  const site = "https://your-domain.com"

  // Path to the iframe content
  const path = "iframe-content.html"

  // Path to the iframe-resizer parent script
  const parentScript = "node_modules/@iframe-resizer/parent/index.umd.min.js"

  // Options for iframe-resizer
  const options = {
    log: "collapsed",
    waitForLoad: true,
  }

  // iframe configuration
  const width = "100%"
  const height = "100vh"

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

  // 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 iframe and script files after this script
  document.currentScript.after(iframe, script)
})()

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

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.

HTML

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

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

Sharing an iframe with third parties

License

Create a setup script

Share the setup script