使用纯JS删除所有内容

Question

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

我尝试过：

document.documentElement.innerHTML = "whatever";

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

Answer 1

我认为浏览器正确地假设内容类型为 text/html 的页面将始终是一个网页 - 因此，尽管您可能会执行类似...的操作，但

document.body.innerHTML = '';

它仍然会包含一些 HTML。

你可以尝试...

document.documentElement.innerHTML = '';

...这给我留下了 。

蒋毅确实提出了一些聪明的建议。

window.location = 'about:blank';

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

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

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

Answer 3

根据 Dotoro 关于 document.clear 方法的文章，他们（因为它已被弃用）建议调用 document.open 相反，它会清除页面，因为它启动了一个新流。

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

Answer 4

可以删除 元素 (document.documentElement）和文档类型（document.doctype）。

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

或者，可以使用循环来删除文档的所有子级。

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

document.open() 或 document.write() 也能工作。

Answer 5

页面完全加载后：

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

Answer 6

我相信这会做到

document.clear()  //deprecated

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

Answer 7

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

document.documentElement.remove()

或等效的

document.getElementsByTagName("html")[0].remove()< /代码>

Answer 8

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

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

Answer 9

现场演示

如果您使用 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>

Answer 10

我只是好奇你为什么要这么做。现在，据我所知，没有办法完全替换文档类型声明的所有内容，但如果您想要达到这些长度，为什么不将用户重定向到一个特制的页面，其中包含您需要的模板和您需要的文档类型，然后在那里填写内容？

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

Answer 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] IS --- !DOCTYPE html ---