ReactJS如何重新加载iframe？

Question

我的ReactJS组件包含一个iframe。响应外部页面的事件，我需要重新加载iframe。如果用户在iframe中导航到另一个页面，则需要将其重置为加载该页面时的URL。这个URL在this.props中可用。

我尝试使用forceUpdate()。我可以看到这会导致render方法运行，但是iframe没有被重置——可能是因为React无法检测到任何更改。

目前，我正在将一些随机文本附加到iframe的查询字符串中：此URL更改会强制React重新渲染iframe。但是这感觉有点不好：iframe内的页面超出了我的控制，所以谁知道这个额外的查询字符串值可能会做什么？

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>
}

（我也在使用 TypeScript，如果这有所不同的话。）

- teedyay

Answer 1

我会创建一个 state 变量来存储随机数，并在 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>
}

这里有一个有效的 fiddle：https://codesandbox.io/s/pp3n7wnzvx

- Diogo Sgrillo

---

你仍然在将东西附加到URL上 - 这是我想避免的部分。我真正想要的是<iframe src={this.props.myUrl}>。 - teedyay

看一下我的回答。我认为如果你把它们结合起来，就可以按照你想要的方式工作。 - Janick Fischer

阅读相关内容，人们似乎不赞成以这种方式使用key，认为这不是 React 的纯粹使用方式。然而他们的解决方案是调用 forceUpdate()，但这并不起作用；更改 key 的值确实有效，因此我会采用这种方法。谢谢！ :) - teedyay

这个程序按照预期工作。但是当重新加载时，iframe 会闪烁。有什么解决方法吗？ - Rakshit Arora

Answer 2

在JavaScript框架和技术中，如果你更新了key，那么它会自动重新加载iFrame。因此，你只需要增加（或随机生成）key的值来执行你的操作。

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

- Jopsy

---

优秀的 :) 谢谢 - java.nazif

Answer 3

更新源代码会重新加载页面，但不会造成重新渲染。

import React, { useState, useRef } from 'react'

function renderIframe({src}){
    const iframeRef = useRef()
    return <>
               <iframe ref={iframeRef} src={src} >
               <span onClick={e => (iframeRef.current.src += '')}>Reload</span
           </>
}

- David Fridley

Answer 4

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

使用此“路由位置键”，每次单击都会获得随机值，无论何时导航到此处，该值都会更改，然后iframe将进行刷新。

- Krishna Reddy Renabothu

Answer 5

你可以创建一个新的组件，只加载你的 iframe。在你的主组件中，你加载它并给它一个更新属性，而在你的 iframe 组件中则忽略它。如果你使用状态变量设置该属性，你的组件将重新加载。你可以查看 Diogo Sgrillo 的答案来了解 setState 方法。

你也可以通过 shouldcomponentupdate() 检查属性是否改变，只有在改变时才进行更新。

- Janick Fischer

Answer 6

可能有点晚了 :) 只是一个小提示：当您基于先前的状态更新状态时，应将函数传递给setState：

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

- Freedruk