javascript document.innerHTML 设置整个文档的内容答案

【问题标题】：javascript document.innerHTML set content of whole documentjavascript document.innerHTML 设置整个文档的内容
【发布时间】：2011-10-09 03:23:41
【问题描述】：

如何使用 javascript 设置innerHTML 或 HTML 文档的全部内容？

例如，我的文档如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-language" content="en"/>
    <title>Webpage Generator</title>
    <script type="text/javascript">
    var newDocument = "&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; \n\t&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Greetings!&lt;/title&gt;\n&lt;/head&gt;\n&lt;body&gt;\n\t&lt;p&gt;Howdy!&lt;/p&gt;\n&lt;/body&gt;\n&lt;/html&gt;";
    document.innerHTML = newDocument;
    </script>
</head>
<body>
</body>
</html>

但浏览器会加载以下 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Greetings!</title>
</head>
<body>
    <p>Howdy!</p>
</body>
</html>

【问题讨论】：

你想通过设置 document.innerHTML 解决什么问题？
为什么不简单地替换身体？
@ChristopheCVB 我想替换整个文档。包括文档类型。
我看不出这有什么意义。
@bazmegakapa 我知道这确实是一种服务器端类型的工作，但我只是好奇它可以在多大程度上用 javascript 完成。

标签： javascript html dom innerhtml

【解决方案1】：

如果你不想使用innerHTML，你可以使用document.write(newDocument);。

如果文档尚未完全加载，您还需要输入document.open()（感谢 bažmegakapa）。

【讨论】：

这只是将newDocument 附加到当前文档而不是替换它。
@inquisitive 如果您在文档加载后运行此命令，它也会发出document.open() 调用。所以基本上一切都会被清除。 jsFiddle Demo
@inquisitive_web_developer 就像我在 cmets 中对我的回答所说的那样，如果您在加载文档后执行此操作（例如 window.onload），它会按照您希望的方式工作。

【解决方案2】：

document.innerHTML 是 HTML5 中的新功能，并非所有浏览器都支持。

document.documentElement 指的是文档的根元素，在本例中为 <html> 元素。

所以，您可以设置document.documentElement.innerHTML。请注意，由于 DOCTYPE 不在此范围内，因此无需将其包含在 innerHTML 中。

示例（尝试在浏览器的 JS 控制台中运行）：

document.documentElement.innerHTML = '<title>Test</title><p>LOLWAT';

更新： document.innerHTML 从 HTML 规范移至 the DOM Parsing and Serialization spec，后来被删除。建议的替代方法是使用DOMParser:

var doc = (new DOMParser).parseFromString('<!doctype html><title>wat</title>', 'text/html');

不幸的是，在撰写本文时，大多数浏览器还不支持 HTML。

【讨论】：

这可能会有所帮助，但有没有办法不仅可以替换 <html> 元素的 innerHTML，还可以替换包括 doctype 在内的整个文档？
@inquisitive_web_developer 你可以使用window.onload = function() { document.write('lol'); }; 这样的东西来覆盖整个文档。或者您可以使用 frame/iframe，这似乎是比您现在正在做的更好的解决方案。
@Mathias Bynens 您使用window.onload 的方法非常聪明，因为它在加载文档之前设置了文档的内容，因此它用新文档替换了原始HTML，而不是附加新文档到加载的 html 页面上。谢谢+1！
@inquisitive_web_developer 实际上，它会在文档加载后设置它，这就是它覆盖原始 HTML 的原因。

【解决方案3】：

使用此代码（当前文档已加载后）：

document.open("text/html", "replace");
document.write(htmlCode);  // htmlCode is the variable you called newDocument
document.close();

这里的例子： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

希望有帮助 ;)

【讨论】：

是的，但要小心，因为某些浏览器（IE 和 Firefox）会将htmlCode 视为新页面本身，所以如果您点击F5，浏览器将不会刷新原始页面，但这htmlCode。如果您希望F5 仍然有效，请参阅我的回答。

【解决方案4】：

简单：

document.body.parentElement.innerHTML = '<html><body><div>Your code</div></body></html>';

请注意，它不会解释嵌入在您的 html 代码中的 js 代码。

【讨论】：