Framework API

The @iframe-resizer/core package provides a High Order Function, that allows you to configure iframe-resizer and then connect a single HTMLIFrameElement.

const resizer = connectResizer(options)(HTMLIFrameElement);

The returned resizer object contains the Parent Page API methods. This provides methods to disconnect iframe-resizer from the iframe, to enable it to be safely removed from the page.

Example component

The following is a simplified version of the jQuery plugin. This example first uses connectResizer() to create the function connectWithOptions(), that we can then use with jQuery’s each() method after first filtering the array passed by jQuery to ensure it only contains iframes. Finally the end() method reverts the filter and passes the original element array back to jQuery.

import connectResizer from "@iframe-resizer/parent-core";

window.jQuery.fn.iframeResize = function (options) {
  const connectWithOptions = connectResizer(options)
  const init = (i, el) => connectWithOptions(el)

  return this.filter('iframe').each(init).end()
}

The actual @iframe-resizer/jquery plugin provides a few more safety checks to help inexperienced users get up and running.

Removing an iframe from the page

When removing an iframe you MUST first call iframe-resizer’s disconnect() method. This prevents issues if the iframe is then later re-added to the page with the same ID.

Virtual DOMs

For frameworks, such as React, that make use of a Virtual DOM. their are a couple of considerations.

When you add an iframe to a Virtual DOM, you need to ensure that connectResizer()() is only called on the first render of the iframe.

Before having a Virtual DOM remove an iframe from the page, iframe-resizer needs to be first disconnect from the iframe. The Parent Page API provides a disconnect() method to unbind iframe-resizer from the iframe element.

The following example of this is a simplified part of the @iframe-resizer/react component.

useEffect(() => {
  // Connect iframe-resizer to iframe
  const resizer = connectResizer(props)(iframe);

  // Return function to be called before iframe is removed
  return () => resizer.disconnect();

  // The empty array tells React to only run this function
  // on the first render of the component.
}, []);

The full React component further demonstrates integration with the Parent Page API.

connectResizer vs iframeResize

The connectResizer()() function is used internally by iframeResize(), the main difference is that the later allows you to pass in any valid CSS Selector, an HTMLElement, or simply not specify anything and it will hunt for iframes on the page, where as connectResize()() requires a single HTMLIFrameElement.

The return type for connectResizer()() is a resizer object containing the Parent Page API methods, whereas iframeResizer() returns an array of the iframes it has found on your behalf.

Was this page useful?

Send

Thanks for your feedback