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.

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.

https://www.buymeacoffee.com/interactiverob

Rob Kirkner