Question

我有一个iframe，其正文设置为contenteditable=true。当我从DOM中删除iframe时，我的所有其他textareas和输入都无法响应用户输入。对象仍然报告他们有焦点但仍然声称正在接收onkeydown事件，但这些元素的内容永远不会因这些事件而改变。

删除带有＆lt; body contenteditable = true＆gt;的iframe后从DOM中，我如何确保其他输入字段保持正常运行？

这是iframe: true时的Froala编辑器的结构。

要求：

仅在IE 11上发生。如果您无法重现，请发布您的IE 11和操作系统版本（我在Windows 10上使用11.309.16299.0）。
iframe的结构无法更改，我知道iframe中没有contenteditable会解决这个问题，这是其他代码的技术要求超出了这个问题的范围。
jQuery库和任何其他第三方库在此环境中不可用。
这不是我实际环境中范围内唯一的iframe，因此对所有iframe的更改都不起作用。

理想情况下，我会在从DOM中删除iframe之后调用一些vanilla javascript函数，该DOM设置浏览器的状态，使输入字段返回正常状态。

代码可以在下面找到，也可以找到代码库的便捷链接。

<head>
<meta charset="UTF-8">

<script>
    function removeIframe() {
        var parent = document.getElementById("parent");
        var iframe =  document.getElementById("iframe");
        parent.removeChild(iframe);
    }

    function setContent() {
        document.getElementById("iframe").contentWindow.document.write("<html><body contenteditable='true'>Step 1: type something here</body></html>");
    }
</script>

</head>
<body>
<div id="parent" style="display:flex; flex-direction:column;">
  <div> This is a test for <b>IE 11 only</b>.
  </div>
    <input id="input" placeholder="Step 3: Try to type something into this input, note that you cannot, that's the problem.">
    <iframe id="iframe" onload="setContent()">
    </iframe>

    <button type="button" onclick="removeIframe()">Step 2: click this button to remove the iframe that you just typed into</button>
</div>

</body>

以下指向codepen的链接提供了一个简单的问题再现。

https://codepen.io/glenpierce/pen/vRgyXe?editors=1010

Answer 1

来自：Window events lost after removing iframe明显不是IE问题，我发现window.focus()解决了这个问题。

function removeIframe() {
        var parent = document.getElementById("parent");
        var iframe =  document.getElementById("iframe");
        parent.removeChild(iframe);
        window.focus(); //new code here
    }

在IE11上，当iframe处于焦点时，在删除iframe上带有contenteditable = true的iframe时无法输入输入框

1 个答案: