profile
viewpoint

Ask questionsIFrame onLoad event with React

I have the following iframe element rendered in one of my React components:

<iframe ref="iframe" src={this.props.url} width="100%" height="100%" frameBorder="0"></iframe>

I have tried adding onLoad event as well as attaching onload directly to DOM like so:

this.refs.iframe.getDOMNode().setAttribute('onload', this.getUrl);

Where getUrl is the function of my React component:

getUrl: function() {
    var path = this.refs.iframe.getDOMNode().contentWindow.location.pathname;
    console.log(path);
},

Except that won't work. if I set attribute to "getUrl()" - IFrame will look for that function in the global scope, if i set it to the above, IFrame won't recognize React component's this.getUrl function.

In Short: I want to notify the React component whenever a URL changes inside the iframe.
facebook/react

Answer questions AbelRR

@jketcham Yes! Want to send a pull request? I think we're missing onError and onLoad which can probably both go in a new subsection called "Generic Events" (no special properties). Also onReset should be listed under Form Events.

Hi @sophiebits, I recently encountered this thread and found what I was looking for in regards to generic events! It would've been great if it was in the Docs, so I've opened a PR with these changes. :) https://github.com/reactjs/reactjs.org/pull/2123

useful!
source:https://uonfu.com/
answerer
Abel Regalado AbelRR Chan Zuckerberg Initiative Oakland, CA I hack therefore I am.
Github User Rank List