Basic react iframe with onLoad handler

BzIframe.js

'use strict';

var React = require('react');

var BzIframe = React.createClass({

  propTypes: {
    src: React.PropTypes.string.isRequired,
    onLoad: React.PropTypes.func
  },

  componentDidMount: function() {
    this.refs.iframe.getDOMNode().addEventListener('load', this.props.onLoad);
  },

  render: function() {
    return <iframe ref="iframe" {...this.props}/>;
  }
});

module.exports = BzIframe;

Example use.js

var Example = React.createClass({
  getInitialState: function() {
    return {
      isLoading: true
    };
  },

  render: function() {

    var classes = cx({
      'is-loading': this.state.isLoading // Hide `is-loading` with CSS
    });

    return (
          {this.state.isLoading ?
            <p>Loading... A spinner would probably be nice here</p>
            :null
          }
          <BzIframe className={classes} onLoad={this._iframeLoaded} src="http://link-to-somewhere"/>

        </div>
      </DocumentTitle>
    );
  },

  _iframeLoaded: function() {
    this.setState({
      isLoading: false
    });
  }
});

Just a simple react-wrapped iframe with an onLoad callback. We're using it on a couple projects at Bizzby to load in external pages within our react app.

Awesome, thanks for sharing! 👍

It doesn't work in IE ... some tips to make it work? thx

think you will probably unregister the eventhandler on componentWillUnmount

AWESOME 👍 wonder why this is not included in react from the first place or at least as a part of some framework..

Awesome! How can I get an iframe URL, pass to React app and change react url?

react-v0.14 changelog

The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a ref to a React DOM component and realized that the only useful thing you can do with it is call this.refs.giraffe.getDOMNode() to get the underlying DOM node. Starting with this release, this.refs.giraffe is the actual DOM node.

Worth updating:

this.refs.iframe.getDOMNode().addEventListener('load', this.props.onLoad);

to

this.refs.iframe.addEventListener('load', this.props.onLoad);

Thank you!

+1 on @kocur4d, @iest there are breaking changes to recent versions of React that would cause this code to throw errors. Thank you very much for providing a clear example on how to harness iframe onload in React!

Thanks, though I am having some difficulties in how to use this in my react app.. Say I pass an url into the src of the BzIframe, (and thus into the iframe), which in turn renders that webpage in the iframe, and when the iframe-url is changed, for example by the user clicking a button and getting redirected..how would I be able to get that redirct-url back into my react app?

Thanks!

What if Ifram failed to load the URL?

I would like to see how we can handle when the url don't resolve or fails to load?