为什么点击 ESCAPE 会阻止 <iframe> 加载？

Question

我的应用程序中有一个非常奇怪的错误，如果通过点击 ESCAPE 将 <iframe> 添加到 DOM，则无法加载它。

class App extends React.Component {
  constructor() {
    super()
    this.state = { toggled: true }
    this.toggle = this.toggle.bind(this)
  }

  componentDidMount() {
    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 27) {
        // Uncomment the next line to make the video work when hitting ESC
        // e.preventDefault()
        this.setState({ toggled: false })
      }
    })
  }

  toggle() {
    this.setState({ toggled: !this.state.toggled })
  }

  render() {
    return (
      <div>
        {this.state.toggled
          ? <div>Hit ESC to show the video</div>
          : (
            <div>
              <div><button onClick={this.toggle}>Hide video</button></div>
              <iframe width="560" height="315" src="https://www.youtube.com/embed/lUOK2ZpjvaM" frameborder="0"></iframe>
            </div>
          )
        }
      </div>
    ) 
  }
}

Demo on JS Bin.

您在这里看到的是一个简单的 React 应用，当您点击 ESCAPE 时，它会显示嵌入的 YouTube 视频。不过，我对此有一些不明白的地方：<iframe> 仅在我在 keydown 事件中 preventDefault() 时加载。

为什么这是必要的？我在 Chrome 和 Firefox 中观察到了这种行为。

Answer 1

这是浏览器的默认行为 - 按 escape 将停止加载页面。

例如在铬： https://superuser.com/questions/162660/how-do-you-stop-a-webpage-from-loading-in-google-chrome#answer-162661

iframe 将在当前页面中加载另一个完整的网页，因此普通网页的所有按键操作仍然适用于 iframe。

您是正确的，您可以通过在 keydown 上使用 event.preventDefault() 来防止这种情况。如果键 是 转义键，最好只调用 preventDefault ，否则您将阻止所有其他键的默认操作。

在您的 keydown 事件中，您应该添加如下内容：

if (event.keyCode === 27) {
    event.preventDefault();
}