iframe-resizer

What is iframe-resizer?

The iframe-resizer npm package provides a set of tools to automatically resize iframes to fit their content and to enable communication between the iframe and the parent page. It is useful for ensuring that iframes are displayed correctly without scrollbars and for passing data between the iframe and the parent page.

What are iframe-resizer's main functionalities?

Automatic Resizing

This feature automatically resizes the iframe to fit its content. The `log: true` option enables logging for debugging purposes, and `#myIframe` is the selector for the iframe element.

const iFrameResize = require('iframe-resizer/js/iframeResizer');
iFrameResize({ log: true }, '#myIframe');

Height Calculation Methods

This feature allows you to specify different methods for calculating the height of the iframe. The `heightCalculationMethod` option can be set to various values like 'bodyScroll', 'documentElementScroll', 'max', etc. In this example, 'taggedElement' is used.

iFrameResize({ heightCalculationMethod: 'taggedElement' }, '#myIframe');

Message Passing

This feature enables sending messages from the parent page to the iframe. The `sendMessage` method is used to send a message to the iframe.

const iframe = iFrameResize({ log: true }, '#myIframe')[0];
iframe.iFrameResizer.sendMessage('Hello from parent');

Event Handling

This feature allows you to handle events such as resizing. The `resizedCallback` option is a function that gets called whenever the iframe is resized.

iFrameResize({
  resizedCallback: function(messageData) {
    console.log('Iframe resized:', messageData);
  }
}, '#myIframe');

Other packages similar to iframe-resizer

react-iframe-resizer-super

This package is a React wrapper for iframe-resizer, providing similar functionality but specifically designed for use with React applications. It simplifies the integration of iframe-resizer in React projects.

iframe-resizer-react

Another React-specific package that wraps iframe-resizer, making it easier to use within React components. It offers similar features but is tailored for React's component-based architecture.

README

This package is a legacy version of iframe-resizer. This project has now been split in to separate packages for the parent and child pages.

• @iframe-resizer/parent
• @iframe-resizer/child

Their is now also versions of iframe-resizer for React, Vue, Angular and jQuery.

• @iframe-resizer/react
• @iframe-resizer/vue
• @iframe-resizer/angular
• @iframe-resizer/jquery

For more details please see: https://iframe-resizer.com/upgrade.

---

Copyright © 2013-24 David J. Bradshaw