Skip to content

Introduction

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

Modern browsers still do not provide a single consistently reliable method to calculate page content size. To overcome this limitation, iframe-resizer automatically inspects your page and selects the best value for your content every time it detects a change in the page.

The iframe size is calculated using a range of browser values and, when necessary, it falls back to using iframe-resizer’s own custom content size detection algorithm.

To ensure minimal impact on your site, iframe-resizer is highly optimized and utilizes Set Theory to ensure it only checks the page elements that affect 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.

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

Additionally, iframe-resizer provides missing browser API features that enable secure integration of your iframe content with the parent page.

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

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, we refreshed and simplified the API. If you are coming from a previous version, there is an Upgrade Guide to explain the changes.

Was this page useful?