Saturday, 22 April 2017

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=>
                <IframeResizer iframeResizerOptions={iframeResizerOptions}>
                    <iframe scrolling="no" src="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen
                            style=
                    }}></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



via user2309671

No comments:

Post a Comment