DEV Community

Cover image for iFrame Adjuster: A Lightweight Solution for Responsive iFrame Heights
jQueryScript
jQueryScript

Posted on

iFrame Adjuster: A Lightweight Solution for Responsive iFrame Heights

iFrame Adjuster: a zero-config JavaScript plugin that keeps iframe height in sync with its content automatically.

Key features:

  • Handles multiple iframes on the same page
  • Detects iframe reloads (form submits, redirects)
  • Uses postMessage and requestAnimationFrame for smooth updates
  • No dependencies, no configuration
  • Free and open-source for commercial use

Load the script on both the parent page and inside the iframe, add data-iframe-adjust to your iframe tag, call iFrameAdjuster() once, and you're done.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)