React: IFrame onLoad event with React

[sahat]

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.

[heyimalex]

Confirmation that the React.DOM.iframe component doesn't fire the onLoad event: http://jsfiddle.net/7e509yk6/1/

[sophiebits]

Relevant: http://developer.zendesk.com/blog/2014/05/13/rendering-to-iframes-in-react/

[louis110110]

      var iframe = this.refs.iframe.getDOMNode();
      if (iframe.attachEvent){
        iframe.attachEvent("onload", function(){
          alert("Local iframe is now loaded.(IE)");
        });
      } else {
        iframe.onload = function(){
          alert("Local iframe is now loaded.(non-IE)");
        };
      }

it works

[syranide]

Should probably just apply the <img onLoad-fix (onError?) to iframe as well.

[nelix]

@syranide that sounds good... or at least warn that onLoad doesn't work one use?

[FractalizeR]

Is it resolved? #2854 is marked as merged. May be this issue can be closed now?

[sophiebits]

Yes, thanks.

[jketcham]

Glad there's an onLoad event for iframes! Didn't find this in the docs though, is that something that should be added? @spicyj

[sophiebits]

@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.

[varungupta85]

IFrame onload event is fired in Firefox but not in Chrome. I am using Firefox v41 and Chrome v46 and react v0.13.3. Below is the jsx

<div>
        <iframe src={this.props.fileLocation} frameBorder={0} style={fileIframeStyle} onLoad={this.handleFileLoad}></iframe>
</div>

Should I consider upgrading to react 0.14 for this to work?

[varungupta85]

I needed to add more information to my above comment. The 'load' event is fired in both Chrome and Firefox but what is missing is that the callback for the onLoad event i.e. handleFileLoad is called only in Firefox and not in Chrome. I put a breakpoint in Chrome on 'load' event and I am able to see that the 'load event is fired and the handler is also called for some libraries such as bootstrap but for some reason, my callback is never fired.

Any thoughts? Please let me know if you need me to share any other information about my setup.

[jimfb]

@varungupta85 Try upgrading to React 14.0 and see if you're still running into the issue. If you are, please open a new bug with a simple testcase/jsfiddle that demonstrates the issue.

[varungupta85]

@jimfb I am running into this issue with React 0.14 also. I have opened #5332 for the issue which contains a jsfiddle to demonstrate the issue.

[jimfb]

@varungupta85 Ok, perfect, thanks!

[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