Skip to content
Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Nov 12, 2019
docs Update Vue link Nov 10, 2019
example Add buttons to example file that toggle autoResize on/off Jul 1, 2019
js Release v4.2.10 Feb 4, 2020
spec Fixed bug with padding 'px' and removed string check for 'px' in border Oct 16, 2019
src Fixes #522 by binding `requestAnimationFrame` to `window`. This is a … Dec 12, 2019
test #771 - blacklisted javascrip: and about: schemas. Added test file wit… Nov 18, 2019
.eslintrc swap jshint for eslint Nov 18, 2019
.gitignore fix: fix memory leak when an IFrame gets removed Jan 9, 2019
.ncurc.json Update deps Apr 23, 2019
.npmignore V4.0.0 (#664) Feb 24, 2019
.prettierrc V4.0.0 (#664) Feb 24, 2019
.travis.yml Node -> 11 Oct 28, 2018
CHANGELOG.md Release v4.2.10 Feb 4, 2020
CONTRIBUTING.md V4.0.0 (#664) Feb 24, 2019
FUNDING.md Update FUNDING.md Nov 10, 2019
LICENSE Update LICENSE Jan 29, 2019
README.md Update README.md Jan 16, 2020
bower.json Release v4.2.10 Feb 4, 2020
gruntfile.js swap jshint for eslint Nov 18, 2019
index.js swap jshint for eslint Nov 18, 2019
karma.conf.js swap jshint for eslint Nov 18, 2019
package-lock.json Release v4.2.10 Feb 4, 2020
package.json
test-main.js swap jshint for eslint Nov 18, 2019

README.md

iFrame Resizer V4

NPM version NPM Downloads Coverage Status Donate

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)

Donate

Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the development of this project, then please feel free to buy me a coffee.

Buy Me A Coffee

Getting Started

Install

This package can be installed via NPM (npm install iframe-resizer --save).

Usage

The package contains two minified JavaScript files in the js folder. The first (iframeResizer.min.js) is for the page hosting the iFrames. It can be called with via JavaScript:

const iframes = iFrameResize( [{options}], [css selector] || [iframe] );

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.

Typical setup

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.

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

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.

Example

To see this working take a look at this example and watch the console.

API Documentation

IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.

License

Copyright © 2013-20 David J. Bradshaw. Licensed under the MIT License.

You can’t perform that action at this time.