为什么我的 iframe 的 contentEditable 会被重置？答案

【问题标题】：Why does my iframe's contentEditable get reset?为什么我的 iframe 的 contentEditable 会被重置？
【发布时间】：2019-06-14 16:29:10
【问题描述】：

我有一个网页，里面有一个空的 iframe，我想为它分配一个带有 javascript 的源并使其内容可编辑。问题是 - 虽然我可以看到框架的内容在短时间内变得可编辑（浏览器开始在未通过拼写检查的单词下划线） - 有些东西重置了该状态，我留下了一个 iframe，它有正确的内容，但框架的 contentWindow.document.body.contentEditable 已重置为默认的“继承”。

在控制台中设置 contentEditable 属性有效。创建一个在 1000 毫秒后更改 contentEditable 属性的等待函数也是如此。我确定的解决方案是为我希望 iframe 包含的 URL 创建一个 XMLHttpRequest，将响应分配给一个中间 html 元素，更改该元素正文的 contentEditable 属性，然后将其 InnerHTML 分配给 iframe 的 srcdoc。

所以，我有解决方法，但我想了解，是什么阻碍了我最初的、更简单的方法。

完整的html：

<!DOCTYPE html>
<html>
<head>
<script>
function setedit(){
    var editableFrame = document.getElementById("editableFrame");
    editableFrame.src = '/b.html'
    editableFrame.contentWindow.document.body.contentEditable = true;
}
</script>
</head>
<body onload="setedit()">
<iframe id="editableFrame"></iframe>
</body>
</html>

b.html:

<!DOCTYPE html>
<html>
<body>
<p>Lorem ipsum yadda yadda</p>
</body>
</html>

编辑：虽然带有箭头功能的公认解决方案有效，但现在我不明白为什么当我像这样写它时它却没有

function setsrc(){
        var theFrame = document.getElementById('the_frame');
        theFrame.src = '/b.html';
        theFrame.onload = setedit();
}
function setedit(){
        var theFrame = document.getElementById('the_frame');
        theFrame.contentWindow.document.body.contentEditable='true';
}

编辑 2： 好的，我现在明白了。

theFrame.onload = setedit();

在 iframe 加载之前，先评估“setedit()”，然后将其返回值分配给“onload”属性，这不是一个有效的函数。

写也行不通

theFrame.onload = "setedit()";

大概是因为它试图将文字字符串值分配给属性，这也不是一个有效的函数。

令人沮丧的事情和我无法弄清楚的原因是，这些方法都不会导致错误被记录到控制台，并且它们都与分配 onload 处理程序时的分配方式不一致它们在标签内，即

<iframe id="the_frame" onload=setedit()></iframe>
<iframe id="the_frame" onload="setedit()"></iframe>

两者都将“setedit()”函数指定为 onload 事件的处理程序，除非以这种方式定义——它们最终会在父窗口 onload 之前和之后被调用，并且无法在第二个窗口更改 contentEditable 属性由于某种原因，时间也是如此。您必须在窗口的 onload 内构造函数，就像 Kaiido 使用箭头函数所做的那样，或者在 ES5 中像这样：

onload = function(){
    var myFrame = document.getElementById('the_frame');
    myFrame.srcdoc = "<html><body><p>This should be editable</p></body></html>";
    myFrame.onload = function(){
        myFrame.contentDocument.body.contentEditable=true;
    };
}

【问题讨论】：

您需要提供minimal reproducible example。根据您提供的代码，我们无法判断它为什么会重置。

标签： javascript html dom iframe contenteditable

【解决方案1】：

这是因为加载 iframe（就像任何资源顺便说一句一样）是一个异步任务。
因此，您访问的editableFrame.contentWindow（及其document.body）与加载文档后的那个不同。

在你调用它的时候，它是一个空文档；例如，这可以通过记录本文档的textContent 来检查。

我必须外包live example to jsfiddle，因为源自空的 StackSnippets 框架不允许访问内部框架内容。

window.onload = e => {
  the_frame.src = URL.createObjectURL(
    new Blob([`<html><body>An other doc</body></html>`])
  );
  console.log(
    the_frame.contentWindow.document.documentElement.textContent
  ); // ""

  // while in the iframe's onload event
  the_frame.onload = e =>
    console.log(
      the_frame.contentWindow.document.documentElement.textContent
    ); // "An other doc"
};

<iframe id="the_frame"></iframe>

正如您可能已经理解的那样，解决方案是等待 iframe 的 onload 事件在您更改其 src 后触发。

https://jsfiddle.net/zwxrpdf8/1/

【讨论】：