Question

我在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不喜欢background-attachment：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（出于理由和目的）

Answer 1

<强> jsBin demo

使用innerHTML获取整个内部HTML字符串：

document.getElementById('page').innerHTML;

将从您的元素中获取完整的Paragraph以及相关的样式：

<div id="page" contenteditable>
    <p style="color:red">Foo</p>
</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();

将contenteditable HTML复制到iframe

1 个答案: