Iframe-resizer: Making iframe-resizer work in React 0.15

[todesignandconquer]

import { iframeResizer } from 'iframe-resizer'

export class Main extends Component {
  componentDidMount () {
    iframeResizer({log:true}, this.refs.iframe)
  }

  render () {
    return (
      <div>
        <iframe ref='iframe' src="some-page.html" width='100%'/>
      </div>
    )
  }
}

What am I missing? I can see the logs coming through and it seemingly is applying the resizer onto the iframe element, but it actually never triggers any resize events if the content height changes.

[iFrameSizer][Host page: iFrameResizer0] [iFrame.onload] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) 
[iFrameSizer][Host page: document] Trigger event: Visiblity change
console.js:26 [iFrameSizer][Host page: window] Trigger event: focus

Likewise, resizedCallback never gets triggered either.

[davidjbradshaw]

You need to think in React. That iFrame gets redrawn every time anything updates. Use the resize callback to update this.props and then use that value in render().

[todesignandconquer]

I attempted that but the callbacks don't get triggered when the content dimensions of the iframe change:

  componentDidMount () {
    iframeResizer({
      log:true,
      initCallback: () => {
        console.log('ready!')
      },
      resizedCallback: () => {
        console.log('resized!')
      }
    })
  }

I see the logs come through but never the custom ones from applying the callbacks. Also, the only logs that come through are from the Host page and never from the iframe page, if that matters.

[todesignandconquer]

Looks like there was an issue with the way I was including the iframeResizer.contentWindow.js file. I fixed that and now it works! Thanks!!

[davidjbradshaw]

Cool, would be great to have a simple example to add to the docs, if you have a spare few minutes

[zeroasterisk]

FYI - this worked great for me, thanks. I went ahead and made a component

Check it @davidjbradshaw @todesignandconquer
https://github.com/zeroasterisk/react-iframe-resizer
https://zeroasterisk.github.io/react-iframe-resizer/

[davidjbradshaw]

Hi,

Thank you for writing this. Just had a look though your code and had a few comments.

• If your going to inject the script into the iFrame, then you should really listen to the onload load event of the iFrame and do it every time it fires. This way if the page in the iFrame changes or loads slowly you still have the script load in.
• I would suggest rather than creating a content attribute, you make this the child of your component.
• If you change updateIframe(props) { to updateIframe = (props) => { you no longer need to bind it in your constructor, as arrow functions set this correctly for you.
• In your render method you could replace usingthis.props everywhere with the this line at the top of the function const { src, id, frameBorder, className, style } = this.props;.
• I would suggest making the default iframeResizerOptions just equal {} as people using this would expect the default behaviour.

When I get some time I plan to create a section in the docs to link to this and a few other wrapper functions.

[zeroasterisk]

thanks @davidjbradshaw

updated & renamed (npm naming conflict):
https://github.com/zeroasterisk/react-iframe-resizer-super/
https://zeroasterisk.github.io/react-iframe-resizer-super/

[AllanPooley]

Hey gang,

Many thanks @davidjbradshaw for iframe-resizer, and @zeroasterisk for your react adaptation.

React frontend, pulling through complex plugin modified forms from a separate WordPress website (Headless WordPress website).

Thought I'd share my dead simple example for anyone else crawling the web for a react application of iframe-resizer.

On my react front-end:

Installation yarn add react-iframe-resizer-super iframe-resizer

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} />
  );
};

Inside the project that is the source of my iFrame (WordPress):
Include iframeResizer.contentWindow.min.js

[davidjbradshaw]

I have just written my own React interface for iframe Resizer

https://github.com/davidjbradshaw/iframe-resizer-react