iFrame Adjuster

A tiny no-config javascript plugin for resizing the height of iFrame elements when the iFrame's content changes size.

• handles multiple iframes per page
• handles iframes that reload (e.g. form submits)

This plugin will ALWAYS be free and open-source. It can be used for commercial projects with no restrictions.

How to use:

1. Add iFrame Adjuster to both the page and the iframe:

   Install the npm package:
   npm install iframe-adjuster

   Import the script from node_modules:
   import 'iframe-adjuster';

   If you're not using npm, you can simply load it from the CDN:

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-adjuster/dist/iframe-adjuster.min.js"></script>

2. Add data-iframe-adjust as an attribute on the target iFrames

       <iframe data-iframe-adjust src="iframe.html" frameborder="0"></iframe>

3. Call iFrameAdjuster() on the page once, anytime after the Document is ready.

       document.addEventListener("DOMContentLoaded", () => {
           iFrameAdjuster();
       });

   It's not necessary to call iFrameAdjuster() from within the iFrame.

Throw me a bone:

https://www.buymeacoffee.com/interactiverob

Author:

Rob Kirkner