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

Posted 2023-03-05

【中文标题】为啥点击 ESCAPE 会阻止 <iframe> 加载？

【英文标题】：Why does hitting ESCAPE prevent an <iframe> from loading?为什么点击 ESCAPE 会阻止 <iframe> 加载？

【发布时间】：2018-02-16 18:20:17

【问题描述】：

我的应用程序中有一个非常奇怪的错误，如果通过点击 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   src="https://www.youtube.com/embed/lUOK2ZpjvaM" frameborder="0"></iframe>
            </div>
          )
        
      </div>
    ) 
  

Demo on JS Bin.

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

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

【问题讨论】：

IFrame 基本上是页面内的浏览器。如果你在加载时进入一个页面，然后点击退出，它将停止。所以这就是这里发生的事情。也许比 ESCAPE 更好的键，可能是一个想法。或者做你的 preventDefault() 是解决方案。

【参考方案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();

【讨论】：

停止页面加载如何帮助加载 iFrame？你能解释一下吗？

@koolkat "escape" 按键通常会停止页面加载。阻止该默认操作允许 iframe 继续加载。