Javascript 为什么我的iframe'；什么内容可以重置？_Javascript_Html_Dom_Iframe_Contenteditable

Javascript 为什么我的iframe'；什么内容可以重置？

javascript html dom iframe

Javascript 为什么我的iframe'；什么内容可以重置？,javascript,html,dom,iframe,contenteditable,Javascript,Html,Dom,Iframe,Contenteditable,我有一个网页，其中有一个空的iframe，我想给它分配一个带有javascript的源代码，并使其内容可编辑。问题是-虽然我可以看到框架的内容在短时间内变得可编辑（浏览器开始在未通过拼写检查的单词下划线）-但有东西重置了该状态，我留下了一个iframe，它有正确的内容，但框架的contentWindow.document.body.contentEditable已重置为默认的“继承” 在console中设置contentEditable属性有效。创建等待函数在1000毫秒后更改contentE

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

在console中设置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>

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

theFrame.onload = setedit();

在加载iframe之前，在那里计算“setedit（）”，并将其返回值赋给“onload”属性，该属性不是有效的函数

如果你写作，它也不起作用

theFrame.onload = "setedit()";

可能是因为它试图将文本字符串值分配给属性，而属性也不是有效的函数

令人沮丧的是，我无法为so log找出原因，因为这两种方法都不会导致将错误记录到控制台，并且它们都与在标记内部分配onload处理程序时的方式不一致，即

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

两者都将“setedit（）”函数指定为onload事件的处理程序，除非以这种方式定义时，它们最终会在父窗口onload之前和之后被调用，并且由于某种原因，在第二次更改contentEditable属性时失败。您必须在窗口的onload中构造函数，就像kaido对arrow函数所做的那样，或者像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;
    };
}

onload=function（）{
var myFrame=document.getElementById（'the_frame'）；
myFrame.srcdoc=“这应该是可编辑的””；
myFrame.onload=函数（）{
myFrame.contentDocument.body.contentEditable=true；
};
}

这是因为加载iframe（就像任何资源一样）是一项异步任务。
因此，您访问的

editableFrame.contentWindow

（及其

document.body

）与加载文档后的内容不同

在你调用它的时候，它是一个空文档；例如，可以通过记录此文档的

textContent

来检查这一点

我必须外包，因为空源StackSnippets框架不允许访问内部框架内容

window.onload=e=>{
_frame.src=URL.createObjectURL(
新Blob（[`anotherdoc`]）
);
console.log(
_frame.contentWindow.document.documentElement.textContent
); // ""
//在iframe的onload事件中
_frame.onload=e=>
console.log(
_frame.contentWindow.document.documentElement.textContent
)；/“其他文件”
};

因此，正如您所理解的，解决方案是在您更改了iframe的

src

之后，等待iframe的onload事件触发

您需要提供一个。我们无法根据您提供的代码说明为什么会重置。

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

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;
    };
}