Remove all content using pure JS

问题

I'm looking for a way to remove the entire content of a web page using pure Javascript -- no libraries.

I tried:

document.documentElement.innerHTML = "whatever";

but that doesn't work: it replaces the inside of the <html/> element. I'm looking at replacing the entire document, including if possible the doctype and <?xml declaration.

回答1:

I think a browser rightfully assumes a page with content-type text/html will always be a web page - so whilst you may do something like...

document.body.innerHTML = '';

It will still have some HTML hanging around.

You could try...

document.documentElement.innerHTML = '';

...which left me with <html></html>.

Yi Jiang did suggest something clever.

window.location = 'about:blank';

This will take you to a blank page - an internal mechanism provided by most browsers I believe.

I think however the best solution is to use document.open() which will clear the screen.

回答2:

According to Dotoro's article on the document.clear method, they (since it's deprecated) recommend calling document.open instead, which clears the page, since it starts a new stream.

This way, you avoid the nasty about:blank hack.

回答3:

var i = document.childNodes.length - 1;

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

Removes everything (doctype also) on FF 3.6, Chrome 3.195, and Safari 4.0. IE8 breaks since the child wants to remove its parent.

Revisiting a while later, could also be done like this:

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

回答4:

After the page has already fully loaded:

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

回答5:

I believe this will do it

document.clear()  //deprecated

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

回答6:

I believe this will still leave the doctype node hanging around, but:

document.documentElement.remove()

or the equivalent

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

回答7:

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

The Document.open() method opens a document for writing. if you dont use open method, you cant modify Document after set innerhtml to empty string

回答8:

Im just curious as to why you'd want to do that. Now theres no way that I know of to replace absolutely everything down to the doctype declaration but if you are wanting to go to those lengths why not redirect the user to a specially crafted page that has the template you need with the doctype you need and then fill out the content there?

EDIT: in response to comment, what you could do is strip all content then create an iframe make it fill the entire page, and then you have total control of the content. Be aware that this is a big hack and will probably be very painful - but it would work :)

回答9:

REMOVE EVERYTHING BUT --- !DOCTYPE html ---

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

TESTED ON FIREFOX WEB INSPECTOR - childNodes[1] IS --- !DOCTYPE html ---

来源：https://stackoverflow.com/questions/4241397/remove-all-content-using-pure-js

标签

javascript

html

innerhtml