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.
;(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>
<script async src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child@5.4.7"></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.