Question

考虑以下简单的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'));

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

我了解要在ifilla中使用ifilla加载新网址，我们会使用iframe.contentWindow.location.replace('url')。由于React的声明/功能性质，做这样的事情看起来真的很糟糕，我理解需要内置支持这样的东西。

Answer 1

您可以考虑使用整个iframe完全替换嵌入式网址<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。

如何使用React替换iframe的网址？

1 个答案: