html - How do I overwrite an entire document with JavaScript

This is not a duplicate question for these reasons:

I am asking about how to replace the entire HTML document with JavaScript without jQuery or any other fancy extensions to JavaScript. Some of the other questions that are similar to this question deal with specific things like AJAX or jQuery.
I am NOT asking about why document.write() only appends to the page. Perhaps the pure JavaScript solution I am looking for may incorporate that function, but it cannot only be that since it is inadequate by itself.

What I am looking to do is overwrite a webpage as it is displayed in the browser with only HTML. The function document.write() only appends whatever argument is passed to it to the document's body. The property document.documentElement.outerHTML can be read from, but unlike when it is used on a page's child elements, cannot be written to, and even if it could, it would leave the DOCTYPE untouched.

I am working on a bookmarklet, so this JavaScript would not run in the page, meaning there is no problem with the script being overwritten while it is running. It could also be run in the browser's developer tools.

As an example, suppose I have about:blank opened in my browser. The contents of the DOM would look like this:

<html>
    <head></head>
    <body></body>
</html>

I want to be able to overwrite it with whatever string I want. So, for instance, I could make it look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>This is an example.</p>
    </body>
 </html>

How can I achieve that sort of overwrite of a document?

This is not a duplicate question for these reasons:

I am asking about how to replace the entire HTML document with JavaScript without jQuery or any other fancy extensions to JavaScript. Some of the other questions that are similar to this question deal with specific things like AJAX or jQuery.
I am NOT asking about why document.write() only appends to the page. Perhaps the pure JavaScript solution I am looking for may incorporate that function, but it cannot only be that since it is inadequate by itself.

As an example, suppose I have about:blank opened in my browser. The contents of the DOM would look like this:

<html>
    <head></head>
    <body></body>
</html>

I want to be able to overwrite it with whatever string I want. So, for instance, I could make it look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>This is an example.</p>
    </body>
 </html>

How can I achieve that sort of overwrite of a document?

Share asked Dec 16, 2016 at 17:40 Melab 2,8728 gold badges34 silver badges57 bronze badges

From what I can see the only way to do it is to modify each section. I would suggest perhaps thinking of refactoring your code. – Jhecht Commented Dec 16, 2016 at 18:10

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

Try this:

function one() {
  document.write('<html><body><pre>the first html</pre></body></html>');
  document.close();    // this makes the difference
}
function two() {
  document.write('<html><body><pre>the second html</pre></body></html>');
  document.close();
}

Refer to linstantnoodles' answer in question document.write() overwriting the document?, the document.open is implicitly called before the document.write is called, but the document.close doesn't, and
document.write() when document is closed = rewrite the document;
document.write() when document is open = append to the document.

You can use document.implementation.createDocumentType to rewrite the doctype and document.getElementsByTagName to get the DOM elements, then rewrite with innerHTML and setAttribute.

var newDoctype = document.implementation.createDocumentType('html','-//W3C//DTD XHTML 1.0 Transitional//EN','http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtdd');
    document.doctype.parentNode.replaceChild(newDoctype,document.doctype);
    document.getElementsByTagName('html')[0].setAttribute('xmlns', 'http://www.w3/1999/xhtml');


var doc = document.getElementsByTagName('html')[0];
    doc.getElementsByTagName('head')[0].innerHTML = '<title>Example</title>';
    doc.getElementsByTagName('body')[0].innerHTML = '<p>This is an example.</p>';

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Edit:

Updated to include ments by Xweque and xmlns attribute.

document.write('Some Text')

document.write rewrites the page's code.

Others have already mentioned document.write() so for the record here’s another couple of methods:

First, set up your new page as desired in a string...

var NewPage='<!DOCTYPE html><head></head><body>Hello</body></html>';

Now load it via the scrdoc attribute...

Frame_ID.srcdoc=NewPage;

Or the src attribute like this...

Frame_ID.src='data:text/html;charset=utf-8,'+encodeURIComponent(NewPage);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How do I overwrite an entire document with JavaScript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)