Question

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

我试过了：

document.documentElement.innerHTML = "whatever";

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

Answer 1

我认为浏览器合理地假定内容类型为text/html的页面始终是一个网页 - 所以尽管你可能会做类似......

document.body.innerHTML = '';

它仍然会有一些HTML。

你可以试试......

document.documentElement.innerHTML = '';

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

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

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上的所有内容（也是doctype）。 IE8因孩子想要删除其父母而中断。

稍后重访，也可以这样做：

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

Answer 3

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

这样，你可以避免讨厌的about:blank黑客。

Answer 4

页面已完全加载后：

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

Answer 5

我相信这样做会

document.clear()  //deprecated

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

Answer 6

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

Document.open（）方法打开一个文档进行编写。如果您不使用open方法，则在将innerhtml设置为空字符串

后，您无法修改Document

Answer 7

我相信这仍会留下doctype节点，但是：

document.documentElement.remove()

或等效的

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

Answer 8

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

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

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

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

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

Answer 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>

Answer 10

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

编辑：在回复评论时，您可以做的是删除所有内容，然后创建一个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 ---

使用纯JS删除所有内容

11 个答案: