iframe-resizer
Advanced tools
This project has now been split into two separate packages. Please use '@iframe-resizer/parent' and '@iframe-resizer/child'. See https://iframe-resizer.com/upgrade for more details.
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.
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');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.
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.
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.
Their is now also versions of iframe-resizer for React, Vue, Angular and jQuery.
For more details please see: https://iframe-resizer.com/upgrade.
Copyright © 2013-24 David J. Bradshaw
FAQs
This project has now been split into two separate packages. Please use '@iframe-resizer/parent' and '@iframe-resizer/child'. See https://iframe-resizer.com/upgrade for more details.
The npm package iframe-resizer receives a total of 381,817 weekly downloads. As such, iframe-resizer popularity was classified as popular.
We found that iframe-resizer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.