iframe-resizer

Introduction Copy Chapter

The iframe-resizer library aims to take away the pain
points with using iframes. It will resize your iframe to match the size of your content
and then monitors the iframe to ensure that it is remains the perfect size.

Reliable Resizing Copy Section

Modern browsers are still unable to provide a single consistently reliable method to calculate
page content size. Therefore iframe-resizer automatically inspects your page and selects the
best value for your page size from a range DOM values and iframe-resizer's own custom content
size calculation algorithm.

Cross Domain Copy Section

Supports both internal (same-domain) and external (cross-domain) iframes via a simple
JS file that is designed to be a zero impact guest on the sites hosting it.

Lightening Performance Copy Section

To ensure minimal impact on your site, iframe-resizer is highly optimised and
utilizes Set Theory to ensure it only
checks the page elements that effect the sizing of your iframes.

Even on the most complex pages, iframe-resizer can detect changes to both HTML
and CSS, calculate the revised content dimensions and update the iframe in sub
millisecond time.

Setup Copy Section

Please see the iframe-resizer website for setup guides
and API documentation. This includes versions for:

• Vanilla JS
• React
• Vue
• Angular
• jQuery

Along with setup guides for:

• Wordpress
• Google Apps Script

Their is also an API to support the creation
of additional custom components.

Extended API Copy Section

Additionally iframe-resizer provides a range of missing browser API features, that allows you to securely integrate your iframe content with the parent page.

• Scroll the parent page, relative to the iframe or parent page's position
• Provides details of the position of the iframe, the scroll position and viewport of the parent page
• Fixes in page linking in the iframe and allows links to propagate to the parent page
• Adds onMouseEnter and onMouseLeave events to the iframe element
• Simplified message passing between the iframe and the parent page
• Automatic domain authentication
• Enhanced Accessibility

When combined with viewer.js it can even resize iframes containing PDF and ODF documents.

Version 5 Copy Chapter

This version of iframe-resizer has been extensively rewritten to use modern browser APIs, this has enabled significantly better performance and greater accuracy in the detection of content resizing events.

With this release, the opportunity has been taken to refresh and simplify the API, if you are coming from a previous version then their is an Upgrade Guide to explain the changes.

Copyright © 2013-25 David J. Bradshaw