Skip to content

Instantly share code, notes, and snippets.

@iest
Created January 7, 2015 16:43
Show Gist options
  • Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.
Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.
Basic react iframe with onLoad handler
'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;
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
});
}
});
@cbfn
Copy link

cbfn commented Dec 15, 2016

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

@kocur4d
Copy link

kocur4d commented Feb 15, 2017

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

@NathanBWaters
Copy link

Thank you!

@Shiggiddie
Copy link

Shiggiddie commented May 3, 2017

+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!

@progMorten
Copy link

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!

@kevalbhatt
Copy link

What if Ifram failed to load the URL?

@veeramarni
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment