Javascript 为什么击中逃生装置会阻止<；iframe>；从装货开始？

我的应用程序中有一个非常奇怪的bug，如果通过点击ESCAPE将

添加到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>
    ) 
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）
this.state={toggled:true}
this.toggle=this.toggle.bind（this）
}
componentDidMount（）{
document.addEventListener（'keydown'，（e）=>{
如果（例如keyCode===27）{
//取消注释下一行，使视频在按ESC键时工作
//e.预防违约（）
this.setState（{toggled:false}）
}
})
}
切换（）{
this.setState（{toggled:！this.state.toggled}）
}
render（）{
返回(
{this.state.toggled
？点击ESC以显示视频
: (
隐藏视频
)
}
) 
}
}

这里您看到的是一个简单的React应用程序，当您点击ESCAPE时，它会显示一个嵌入的YouTube视频。但我不明白这一点：只有当我在

keydown

事件上执行

preventDefault（）

时，

才会加载

---

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

这是浏览器的默认行为-按

escape

将停止页面加载

例如，在铬中：

iframe

将在当前页面内加载另一个完整的网页，因此正常网页的所有按键操作仍适用于

iframe

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

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

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

---

IFrame基本上是页面内部的浏览器。如果在加载时转到某个页面，并点击escape，它将停止。。这就是这里发生的事情。也许是一把比逃跑更好的钥匙，也许是个主意。或者执行preventDefault（）是解决方案。停止页面加载如何帮助加载iFrame？你能解释一下吗？@koolkat按“escape”键通常会停止页面加载。阻止该默认操作将允许iframe继续加载。