How do you reload an iframe with ReactJS?

My ReactJS component contains an iframe. In response to an event in the outer page, I need to reload the iframe. If the user has navigated to another page in the iframe, I need to reset it to the URL that it had when I first loaded the page. This URL is available in this.props.

I’ve tried using forceUpdate(). I can see that this causes the render method to run, but the iframe doesn’t get reset – presumably because React can’t tell that anything has changed.

At the moment I’m appending some random text to the iframe’s querystring: this URL change forces React to re-render the iframe. However this feels a bit dirty: the page within the iframe is beyond my control so who knows what this extra querystring value might do?

resetIframe() {
    console.log("==== resetIframe ====");
    this.forceUpdate();
}

public render() {
    console.log("==== render ====");

    // How can I use just this.props.myUrl, without the Math.random()?
    let iframeUrl = this.props.myUrl + '&random=' + Math.random().toString();

    return <div>
        <button onClick={() => { this.resetIframe(); }}>Reset</button>
        <iframe src={iframeUrl}></iframe>
    </div>
}

(I’m using TypeScript too, if that makes a difference.)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I’d create a state variable with the random, and just update it on resetIframe:

state = {
     random: 0
}
resetIframe() {
    this.setState({random: this.state.random + 1});
}

public render() {
    return <div>
        <button onClick={() => { this.resetIframe(); }}>Reset</button>
        <iframe key={this.state.random} src={this.props.myUrl}></iframe>
    </div>
}

Here is a fiddle working: https://codesandbox.io/s/pp3n7wnzvx

Method 2

In case of Javascript frameworks and technologies, If you update the key, then it’ll automatically reload the iFrame. So you just want to increase (or Random number) the value of key for your action.

state = {
    iframe_key: 0,
    iframe_url: 'https://www.google.com/maps' //Your URL here
}
iframeRefresh() {
    this.setState({iframe_key: this.state.iframe_key + 1});
}

public render() {
    return (
        <div>
            <button onClick={() => { this.iframeRefresh(); }}>Reload Iframe</button>
            <iframe key={this.state.iframe_key} src={this.state.iframe_url}> 
            </iframe>
        </div>
    );
}

Method 3

    <iframe key={props.location.key} />

use This “Router location Key” each click will get random value, whenever to navigate to here this value will get change then iframe will get the refresh

Method 4

You could create a new component which just loads you iframe. In your main component you load it and give it a update prop which you ignore in you iframe component. If you set the prop with a state variable, your component will reload. You can take a look at Diogo Sgrillo’s answer for the setState method.

You could also check with shouldcomponentupdate() if the prop changed and only update if it changed.

Method 5

Maybe a bit late here 🙂 Just a side note: When you update state based on previous state you should pass a function to setState:

resetIframe() {
    this.setState(prevState => {random: prevState.random + 1});
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x