Javascript 将contenteditable HTML复制到iframe

我正在HTML中制作一个HTML阅读器（原因…）

我过去能做得很好。我获取文本区域的值并将其应用于iframe，如下所示：

    var x = document.getElementById("HTMLdocument");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.innerHTML = document.getElementById('page').value;

但这与样式有关（textarea不喜欢背景附件：local；property），因此我不得不将其更改为带有

contenteditable

的div，下面是我的新代码：

    var x = document.getElementById("HTMLdocument");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.innerHTML = document.getElementById('page').textContent;

但只有基本的HTML拷贝到iframe。。。我该如何解决这个问题？如果我使用.innerHTML而不是.textContent，则不会复制html。真烦人。有一件事总是错的

本机JavaScript（出于原因和目的）

使用

innerHTML

获取整个内部HTML字符串：

document.getElementById('page').innerHTML;

这将使整个

段落

与所有相关风格的元素脱节：

<div id="page" contenteditable>
    <p style="color:red">Foo</p>
</div>

---

什么是

基本HTML

？没有看到演示，我只关注你的提问风格。因此，假设您有

Foo

，则不应用任何颜色。。。而且脚本不会运行，这会更糟。。。现在它甚至无法识别HTML代码：如果我将TEST

写入iframeTEST

而不是TEST，那么交易是，当我有一个文本区域时，我有样式（内联和非内联）和脚本，它们都复制到iframe中，没有问题，但背景图像不会在firefox中保持本地。我认为这将是一个简单的解决方案，使它成为一个可编辑的div。但是没有。

var x = document.getElementById("HTMLdocument");
var y = (x.contentDocument || x.contentWindow);
if (y.document) y = y.document;

// Might work in Chrome but will fail in Firefox
// y.body.innerHTML = document.getElementById('page').innerHTML;

// So rather:
y.open();
y.write( document.getElementById('page').innerHTML );
y.close();