CODEWITHSUNDEEP
node.jsreactjsnpm
Madhawa
Madhawa

Reputation: 154

Setting iframe height to scrollHeight in ReactJS using IframeResizer

The typical solution to the problem doesn't work in in React due to its dynamically generated component structure and event model, as opposed to traditional static HTML. I tried with react-iframe-resizer-super but not found perfect solution.

My code:

import React, {PropTypes} from 'react';

import ReactIframeResizer from 'react-iframe-resizer-super';


class Frame extends React.Component {

    constructor() {
    super();
}

componentDidUpdate() {

        const iframeResizerOptions = {
          // log: true,
          // autoResize: true,
          checkOrigin: false,
          // resizeFrom: 'parent',
          // heightCalculationMethod: 'max',
          // initCallback: () => { console.log('ready!'); },
          // resizedCallback: () => { console.log('resized!'); },
      };
    }


    render() {

        return (

            <div style={{position: 'relative'}}>
                <IframeResizer iframeResizerOptions={iframeResizerOptions}>
                    <iframe scrolling="no" src="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen
                            style={{width:'100%', height:'100%'}}
                    }}></iframe>
                 </IframeResizer>
            </div>
        );
    }
}

Then I got following error:

Uncaught ReferenceError: IframeResizer is not defined

Is there a way in React to set the height of an iframe to the height of its scrollable contents or is there any alternative way to archive this requirement?

I refer following link:

https://www.npmjs.com/package/react-iframe-resizer-super

Upvotes: 0

Views: 4898

Answers (1)

Allan of Sydney
Allan of Sydney

Reputation: 1600

This question is long decease, but I thought I would add just in case anyone else looking for clarification on using react-iframe-resizer-super + iframe-resizer (JS)

The problem in the code above is a misspelling of the imported component.

import ReactIframeResizer from 'react-iframe-resizer-super';

Should be:

import IframeResizer from 'react-iframe-resizer-super';

As you've used it inside your Frame component.

For those looking for clarification on using the library, here is my dead simple working solution:

  1. Install dependencies on React project containing iFrame yarn add react-iframe-resizer-super iframe-resizer
  2. Include iframeResizer.contentWindow.min.js on the page that you are using as the source of your iFrame.
  3. Usage in React:

DynamicIFrame.jsx

import React from 'react';
import IframeResizer from 'react-iframe-resizer-super';

export const DynamicIFrame = props => {
  const { src } = props;
  const iframeResizerOptions = {
    log: true,
    // autoResize: true,
    checkOrigin: false,
    // resizeFrom: 'parent',
    // heightCalculationMethod: 'max',
    // initCallback: () => { console.log('ready!'); },
    // resizedCallback: () => { console.log('resized!'); },
  };
  return (
    <IframeResizer src={src} iframeResizerOptions={iframeResizerOptions} />
  );
};

Upvotes: 2

Related Questions