Question

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

＆＃xA;＆＃ xA;

 类App扩展了React.Component {＆＃xA; constructor（）{＆＃xA;超级（）＆＃XA; this.state = {toggled：true}＆＃xA; this.toggle = this.toggle.bind（this）＆＃xA; }＆＃XA;＆＃XA; componentDidMount（）{＆＃xA; document.addEventListener（'keydown'，（e）=＆gt; {＆＃xA; if（e.keyCode === 27）{＆＃xA; //在点击ESC＆＃xA时取消注释下一行以使视频正常工作; // e.preventDefault（）＆＃xA; this.setState（{toggled：false}）＆＃xA;}＆＃xA;}）＆＃xA; }＆＃XA;＆＃XA; toggle（）{＆＃xA; this.setState（{toggled：！this.state.toggled}）＆＃xA; }＆＃XA;＆＃XA; render（）{＆＃xA;返回（＆＃xA;＆lt; div＆gt;＆＃xA; {this.state.toggled＆＃xA;？＆lt; div＆gt;点击ESC以显示视频＆lt; / div＆gt;＆＃xA; :(＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; div＆gt;＆lt; button onClick = {this.toggle}＆gt;隐藏视频＆lt; / button＆gt;＆lt; / div＆gt;＆＃xA;＆lt; iframe width =“560”height =“315” src =“https://www.youtube.com/embed/lUOK2ZpjvaM”frameborder =“0”＆gt;＆lt; / iframe＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;）＆＃xA;}＆＃ xA;＆lt; / div＆gt;＆＃xA;）＆＃xA; }＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

JS Bin上的演示。

＆＃xA;＆＃xA;

您在这里看到的是一个简单的React应用程序，它显示了嵌入式YouTube-点击ESCAPE时的视频。但是有一些我不明白的事情：＆lt; iframe＆gt; 仅在 keydown 事件上的 preventDefault（）时加载。

＆＃xA;＆＃xA;

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

＆＃xA;

Answer 1

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

E.g。在铬： 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();
}

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

1 个答案: