使用纯JS删除所有内容答案

【问题标题】：Remove all content using pure JS使用纯JS删除所有内容
【发布时间】：2011-05-13 14:05:33
【问题描述】：

我正在寻找一种使用纯 Javascript 删除网页全部内容的方法——无需库。

我试过了：

document.documentElement.innerHTML = "whatever";

但这不起作用：它替换了<html/> 元素的内部。我正在考虑替换整个文档，如果可能的话，包括 doctype 和 <?xml 声明。

【问题讨论】：

location = 'about:blank'
目的是什么？ Javascript 适用于比底层 HTML 序列化更高级别的 DOM（即<?xml 和 doctype 所在的位置）。
@Yi Jiang 这行得通，但我实际上想留在同一个域上......
@Yijiang +1 提供一个好的建议（如果你想留下它作为答案，我会删除我的编辑:)）
我为静态网页的逝去而哀悼，它具有查看任何网页源代码以了解其构建方式和工作原理的相关能力。

标签： javascript html innerhtml

【解决方案1】：

我认为浏览器正确地假定内容类型为 text/html 的页面将始终是网页 - 所以虽然您可能会执行类似...

document.body.innerHTML = '';

它仍然会有一些 HTML。

你可以试试……

document.documentElement.innerHTML = '';

...这给我留下了<html></html>。

Yi Jiang 确实提出了一些聪明的建议。

window.location = 'about:blank';

这将带您进入一个空白页面 - 我相信大多数浏览器都提供了一种内部机制。

我认为最好的解决方案是使用document.open()，它会清除屏幕。

【讨论】：

第一个更新的答案是我正在寻找的一半。但我想更改doctype 要求有点过分......
@passcod 一旦你改变了文档类型，你就改变了浏览器呈现 HTML/CSS 的方式。这可能需要重新加载页面。我认为您不能即时更改文档类型。
@alex 将 window.location 更改为 'about:blank' 对 IE 专业版 IE10 有问题，因为某些插件在检测到 about :blank 页面用它们的内容填充它
我的解决方案似乎更合适，并且避免了about:blank hack。
@MathiasLykkegaardLorenzen 正如我建议的here，我忘记将其添加到我的答案中。

【解决方案2】：

var i = document.childNodes.length - 1;

while (i >= 0) {
  console.log(document.childNodes[i]);
  document.removeChild(document.childNodes[i--]);
}

删除 FF 3.6、Chrome 3.195 和 Safari 4.0 上的所有内容（也包括文档类型）。 IE8 中断，因为孩子想要删除其父母。

过一会再看，也可以这样：

while (document.firstChild) {
  document.removeChild(document.firstChild);
}

【讨论】：

很好，但您仍然无法更改文档类型...这并不重要。我尝试时 Firefox 崩溃了...
您的问题是“如何更改文档类型”还是“使用纯 JS 删除所有内容”？

【解决方案3】：

根据Dotoro's article on the document.clear method，他们（因为它已被弃用）建议改为调用document.open，这会清除页面，因为它会启动一个新的流。

这样，您就可以避免讨厌的about:blank hack。

【讨论】：

【解决方案4】：

页面已经完全加载后：

document.write('');
document.close();

【讨论】：

你可以使用document.open()。

【解决方案5】：

可以同时删除 <html> 元素 (document.documentElement) 和文档类型 (document.doctype)。

document.doctype.remove();
document.documentElement.remove();

或者，可以使用循环删除document 的所有子代。

while(document.firstChild) document.firstChild.remove();

document.open() 或 document.write() 也可以。

【讨论】：

【解决方案6】：

我相信这会成功

document.clear()  //deprecated

window.location = "about:blank"  //this clears out everything

【讨论】：

这对我不起作用，但我确实在 jsbin.com 上尝试过，它可能在幕后做其他事情。
@alex ..是的，我刚刚意识到 document.clear() 已被弃用。
@John Hartsock 将 window.location 更改为 'about:blank' 对 IE 特别是 IE10 有问题，因为检测到 时有一些插件about:blank 页面用他们的内容填充它
五年后，很多事情在 IE 中仍然无法正常工作并不那么重要，因为 MS 已经停止了 IE 的开发，转而支持 Edge。

【解决方案7】：

我相信这仍然会使 doctype 节点悬而未决，但是：

document.documentElement.remove()

或同等的

document.getElementsByTagName("html")[0].remove()

【讨论】：

【解决方案8】：

document.documentElement.innerHTML='';
document.open();

Document.open() 方法打开一个文档进行写入。如果不使用 open 方法，则将 innerhtml 设置为空字符串后无法修改 Document

【讨论】：

【解决方案9】：

Live demo

如果您使用 jQuery，这就是您的解决方案

<div id="mydiv">some text</div>
<br><br>
<button id="bn" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
$(document).on('click', '#bn', function() {
  $("#mydiv").empty();
  $("#bn").empty().append("Done!");
});
</script>

如果您使用的是 javascript，这就是您的解决方案

<div id="purejar">some text</div>
<br><br>
<button id="bnjar" onclick="run()" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
var run = function() {
  var purejar = document.getElementById("purejar");
  var bn = document.getElementById("bnjar");
  purejar.innerHTML = '';
  bn.innerHTML = 'Done!';
}
</script>

【讨论】：

【解决方案10】：

我只是好奇你为什么要这样做。现在我知道没有办法将所有内容都替换为 doctype 声明，但是如果您想要达到这些长度，为什么不将用户重定向到一个特制的页面，该页面具有您需要的模板以及您需要的 doctype，然后在那里填写内容？

编辑：作为对评论的回应，您可以做的是剥离所有内容，然后创建一个 iframe 使其填满整个页面，然后您就可以完全控制内容。请注意，这是一个大技巧，可能会非常痛苦 - 但它会起作用:)

【讨论】：

致所有询问原因的人...这似乎是一种在用户脚本中剥离所有内容并从头开始的简单方法...我可以包含我想要的任何 JS 代码，它会运行在页面中，而不是在沙箱中。 doctype 是我想在 html 网站上使用 xhtml 时使用的。
事实上，Steve 的解决方案很棒...只需调整一些内容以包含 doctype...
用于用户脚本。 Ofc 我不需要 IE 支持。 =)
@passcod - 更改文档类型毫无意义。您不会得到一个 XML 文档——只有 HTTP 内容类型可以做到这一点。如果你用 javascript 构建你的 DOM，你也不会去验证它。

【解决方案11】：

删除所有内容，但 --- !DOCTYPE html ---

var l = document.childNodes.length;    
while (l > 1) { var i = document.childNodes[1]; document.removeChild(i); l--; }

在 Firefox WEB INSPECTOR 上测试 - childNodes[1] 是 --- !DOCTYPE html ---

【讨论】：