Replacing Entire Page Including Head Using Javascript
JavascriptHtmlJavascript Problem Overview
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!!
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
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>
Solution 3 - Javascript
$("html").html('your page html here');
Solution 4 - Javascript
document.getElementsByTagName("html")[0].innerHTML Contains both head and body tags.
I Usually avoid document.open\write\close
Solution 5 - Javascript
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);