Including a third party iframe

This is a quick setup guide that details how to create a simple javascript file that you can share with third parties that are providing your site with their iframe.

This approach simplifies the setup for your supplier site 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 supplier and ask them to make changes to their site.

When displaying a third party iframe on your own site. You just need to ask the provider to include the following script on every page they present in the iframe.

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 your site
  const yourSite = 'https://your-domain.com'

  // Path to the iframe-resizer child script
  const childScript = 'node_modules/@iframe-resizer/child/index.umd.min.js'

  // Options for iframe-resizer  (See Child Page API for more details)
  window.iframeResizer = {
    targetOrigin: yourSite,
  }

  // Load iframe-resizer child script
  const script = document.createElement('script')
  script.src = `${yourSite}/${childScript}`
  script.async = true
  script.fetchPriority = 'high'
  script.onerror = function () {
    console.error('Failed to load iframe-resizer library')
  }

  // Insert iframe-resizer child after this script
  document.currentScript.after(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 websites to simply include the following on each page they show in the iframe.

HTML

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

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.

Including a third party iframe

Create a setup script

Share the setup script