如何使用 React 替换 iframe 的 URL？答案

【问题标题】：How to replace the URL of an iframe using React?如何使用 React 替换 iframe 的 URL？
【发布时间】：2016-08-17 19:33:57
【问题描述】：

考虑以下简单的 React 组件，它显示一个 YouTube 视频并有一个更改视频的按钮：

import React from 'react';
import ReactDOM from 'react-dom';

class Video extends React.Component {
  state = { video: 'G8KpPw303PY' };

  handleClickButton = event => {
    this.setState({ video: 'PHAc3_MEjgQ' });
  };

  render() {
    return (
      <div>
        <iframe
          src={`https://www.youtube.com/embed/${this.state.video}?autoplay=1`}
        />
        <input
          type="button"
          value="Change Video"
          onClick={this.handleClickButton}
        />
      </div>
    );
  }
}

ReactDOM.render(<Video />, document.getElementById('react-root'));

如果我点击按钮，视频会发生变化（应该如此）。但是，浏览器历史记录中也会添加一个页面。如何使页面不添加到浏览器历史记录中？

我知道要在原生 JavaScript 中的 iframe 中加载新 URL，我们会使用 iframe.contentWindow.location.replace('url')。不过，由于 React 的声明性/功能性，做这样的事情看起来真的很老套，我知道需要对这样的事情提供内置支持。

【问题讨论】：

你能解释一下“页面被添加到浏览器历史记录”是什么意思吗？它会影响前进/后退按钮吗？或者仅仅是浏览器知道它已经存在的问题（例如，如果您转到 about:history，它可能会被列出）？后者似乎是一个我想不出绕过的好理由的功能。如果您解释为什么这是一个问题，它也可能有助于我们提出替代解决方案。

标签： javascript html iframe reactjs

【解决方案1】：

您可以考虑用整个 iframe 完全替换您的嵌入式 URL <iframe src={url/${url.component}?}/>。

你可以使用类似的代码

var MyComponent = React.createClass({/*...*/});
var myElement = <iframe src="https://www.youtube.com/embed/G8KpPw303PY"></iframe>;
React.render(myElement, document.getElementById('example'));
<!-- where this is rendered 'on top of' or replacing your old video -->

[source] 和更多细节，如果你喜欢的话

添加一个 iFrame 元素，通过此方法，该元素已存在于页面中。

或者，如果您只特别关心历史中出现的上一页迭代，您可以实现this workaround。它确实做到了，尽管它也很hacky。

【讨论】：