Replacing Entire Page Including Head Using Javascript

Question

I have a Javascript function that is passed a string. The string that it is passed is an entire webpage, including the header. I need the Javascript to replace the entire current page, head and all with the new content.

Consider the following HTML file:

<html>
  <head>
    <script language="Javascript">
      <!--
      var newContent='<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>';
      function ReplaceContent(NC) {
        document.body.innerHTML=NC;
      }
      function Hi() {
        alert("Hello World");
        ReplaceContent(newContent);
      }
      -->
    </script>
  </head>
  <body onload="Hi();">
    Original Content
  </body>
</html>

In this case, the passed string is:

<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>

But of course, since the "ReplaceContent" function is only replacing the body, but not the header, I never get the "Goodbye World" alert.

Ignoring "why I would want to do this", How can I dynamically replace the entire page, including the header, and javascript functions?

Please remember the "source" html ('newContent' above) exists only as a string, it does not exist on a server anywhere, so I cannot just redirect to it.

What changes I make to "ReplaceContent" above to cause the "Goodbye World" alert to appear once the content is replaced? Please keep in mind I cannot know in advance the value of the newContent variable!!

+1 - for taking no nonsense from the "why would you want to do this?" brigade. — Alohci, Nov 27 '10 at 18:00
Couldn't you do this as a way of caching and preloading a page in RAM? — Jonathan, Jun 09 '16 at 23:54

score 78 · Accepted Answer · edited Apr 18 '18 at 15:09

78

Use document.write.

<html>
  <head>
    <script language="Javascript">
      <!--
      var newContent='<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>';
      function ReplaceContent(NC) {
        document.open();
        document.write(NC);
        document.close();
      }
      function Hi() {
        ReplaceContent(newContent);
      }
      -->
    </script>
  </head>
  <body>
    Original Content
    <a href="javascript:Hi()">Replace</a>
  </body>
</html>

edited Apr 18 '18 at 15:09

Macbric

462
4
10

answered Nov 27 '10 at 16:33

Dark Falcon

42,395
5
80
94

Although this is working for the provided example, if I try it on a real live page, like a facebook page, for example, it doesn't work. The code will work in an iframe, but when I try to "run" the same code by using document.write, I don't get the same result. What else could be missing? – Joshua Nov 27 '10 at 19:03
When do you attempt to execute it? Another thing you might try would be a document.open, as recommended in one of the other answers. – Dark Falcon Nov 27 '10 at 21:56
Does the script have to be in the head in this case? – GiantCowFilms Dec 29 '14 at 17:20
If you have javascript running on the ondocumentready event in the resulting html, it will not execute in IE11/Edge – jnoreiga Aug 22 '18 at 16:41
I tried using this method, but it writes the imported js variables again, therefore you get an error for declaring the same variables. Used document.querySelector('html').innerHTML instead – Roy Levy Apr 05 '20 at 09:11

Free Consulting · Answer 2 · 2015-04-17T23:55:49.720

Script

javascript:document.open('text/html');document.write('<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HAI</title></head><body><h1>OMG HAI2U!!!1</h1></body></html>');document.close();

DOM snapshot of the resulting page

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HAI</title></head><body><h1>OMG HAI2U!!!1</h1></body></html>

score 6 · Answer 3 · answered Nov 27 '10 at 17:52

6

$("html").html('your page html here');

answered Nov 27 '10 at 17:52

Robin Maben

20,994
16
62
96

Robin, thanks for your answer.This changes the html content of the same page. Is it possible to change the content of another page with this content. Eg; From index.html I want to change index1.html content. Just like $("index1.html").html('your page html here'); – Nijil Nair Nov 05 '13 at 06:04
1

@NijilNair: I don't understand what you mean by another page. Do you mean you have several `iframe`s embedded in one page? – Robin Maben Nov 05 '13 at 06:33

score 4 · Answer 4 · answered Sep 08 '19 at 23:15

4

document.getElementsByTagName("html")[0].innerHTML Contains both head and body tags. I Usually avoid document.open\write\close

answered Sep 08 '19 at 23:15

YoniXw

356
3
9

1

document.querySelector('html').innerHTML = 'my content'; – Patrick Otto Mar 11 '20 at 20:44
this is the real answer, solved my problem when none of the other proposed solutions did – darryn.ten Sep 28 '20 at 08:26

score -5 · Answer 5 · answered Oct 14 '18 at 07:12

-5

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.7.2.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

answered Oct 14 '18 at 07:12

Ravi Prakas

1
1

2

This doesn't even come close to updating an entire page's content. This just adds jquery to the page. – takendarkk Feb 24 '21 at 22:15

Replacing Entire Page Including Head Using Javascript

5 Answers5

Script

DOM snapshot of the resulting page

Linked