iframe-resizer4.1.1 • Public • Published
iFrame Resizer V4
This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:
- Height and width resizing of the iFrame to content size.
- Works with multiple and nested iFrames.
- Domain authentication for cross domain iFrames.
- Provides a range of page size calculation methods to support complex CSS layouts.
- Detects changes to the DOM that can cause the page to resize using MutationObserver.
- Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
- Simplified messaging between iFrame and host page via postMessage.
- Fixes in page links in iFrame and supports links between the iFrame and parent page.
- Provides custom sizing and scrolling methods.
- Exposes parent position and viewport size to the iFrame.
- Works with ViewerJS to support PDF and ODF documents.
- Supports IE 11 (V3 supports back to IE8)
This package can be installed via NPM (
npm install iframe-resizer --save).
const iframes = ;
The second file (iframeResizer.contentWindow.min.js) needs placing in the page(s) contained within your iFrame. This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page.
The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
Note: Using min-width to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
If you have problems, check the troubleshooting section.
IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.
- Parent Page API
- IFramed Page API
- Use with jQuery
- Upgrade from version 3
- Version history
If you would like to show your support for this project, then please feel free to buy me a coffee.