I am trying to replace the whole DOM on page load to do a no-js fallback for a user created knockout page.
I have it replacing the DOM, but when I do the scripts included in the new document aren’t running. I was wondering if theres any way of forcing them to run.
JavaScript
x
14
14
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Title1</title>5
</head>6
<body>7
Hello world <!-- No JS enabled content -->8
</body>9
<script type="text/javascript">10
var model = { 'template' : 'u003chtmlu003eu003cheadu003eu003ctitleu003eTitle2u003c/titleu003eu003cscript type="text/javascript"u003ealert("test");u003c/scriptu003eu003c/headu003eu003cbodyu003eHello world2u003c/bodyu003eu003c/htmlu003e' };11
document.documentElement.innerHTML = model.template;12
</script>13
</html>14
template contains the following encoded
JavaScript
1
10
10
1
<html>2
<head>3
<title>aaa</title>4
<script type='text/javascript'>alert('hello world');</script>5
</head>6
<body>7
Hello world <!-- JS enabled content -->8
</body>9
</html>10
how can I get the alert to run?
Advertisement
Answer
As you’ve discovered, the code in the script tags in the text you assign to innerHTML is not executed. Interestingly, though, on every browser I’ve tried, the script elements are created and placed in the DOM.
This means it’s easy to write a function to run them, in order, and without using eval and its weird effect on scope:
JavaScript
1
74
74
1
function runScripts(element) {2
var scripts;3
4
// Get the scripts5
scripts = element.getElementsByTagName("script");6
7
// Run them in sequence (remember NodeLists are live)8
continueLoading();9
10
function continueLoading() {11
var script, newscript;12
13
// While we have a script to load...14
while (scripts.length) {15
// Get it and remove it from the DOM16
script = scripts[0];17
script.parentNode.removeChild(script);18
19
// Create a replacement for it20
newscript = document.createElement('script');21
22
// External?23
if (script.src) {24
// Yes, we'll have to wait until it's loaded before continuing25
newscript.onerror = continueLoadingOnError;26
newscript.onload = continueLoadingOnLoad;27
newscript.onreadystatechange = continueLoadingOnReady;28
newscript.src = script.src;29
}30
else {31
// No, we can do it right away32
newscript.text = script.text;33
}34
35
// Start the script36
document.documentElement.appendChild(newscript);37
38
// If it's external, wait for callback39
if (script.src) {40
return;41
}42
}43
44
// All scripts loaded45
newscript = undefined;46
47
// Callback on most browsers when a script is loaded48
function continueLoadingOnLoad() {49
// Defend against duplicate calls50
if (this === newscript) {51
continueLoading();52
}53
}54
55
// Callback on most browsers when a script fails to load56
function continueLoadingOnError() {57
// Defend against duplicate calls58
if (this === newscript) {59
continueLoading();60
}61
}62
63
// Callback on IE when a script's loading status changes64
function continueLoadingOnReady() {65
66
// Defend against duplicate calls and check whether the67
// script is complete (complete = loaded or error)68
if (this === newscript && this.readyState === "complete") {69
continueLoading();70
}71
}72
}73
}74
Naturally the scripts can’t use document.write.
Note how we have to create a new script element. Just moving the existing one elsewhere in the document doesn’t work, it’s been marked by the browser as having been run (even though it wasn’t).
The above will work for most people using innerHTML on an element somewhere in the body of the document, but it won’t work for you, because you’re actually doing this on the document.documentElement. That means the NodeList we get back from this line:
JavaScript
1
3
1
// Get the scripts2
scripts = element.getElementsByTagName("script");3
…will keep expanding as we add further scripts to the document.documentElement. So in your particular case, you have to turn it into an array first:
JavaScript
1
10
10
1
var list, scripts, index;2
3
// Get the scripts4
list = element.getElementsByTagName("script");5
scripts = [];6
for (index = 0; index < list.length; ++index) {7
scripts[index] = list[index];8
}9
list = undefined;10
…and later in continueLoading, you have to manually remove entries from the array:
JavaScript
1
5
1
// Get it and remove it from the DOM2
script = scripts[0];3
script.parentNode.removeChild(script);4
scripts.splice(0, 1); // <== The new line5
Here’s a complete example for most people (not you), including the scripts doing things like function declarations (which would be messed up if we used eval): Live Copy | Live Source
JavaScript
1
115
115
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset=utf-8 />5
<title>Run Scripts</title>6
</head>7
<body>8
<div id="target">Click me</div>9
<script>10
document.getElementById("target").onclick = function() {11
display("Updating div");12
this.innerHTML =13
"Updated with script" +14
"<div id='sub'>sub-div</div>" +15
"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></scr" + "ipt>" +16
"<script>" +17
"display('Script one run');" +18
"function foo(msg) {" +19
" display(msg); " +20
"}" +21
"</scr" + "ipt>" +22
"<script>" +23
"display('Script two run');" +24
"foo('Function declared in script one successfully called from script two');" +25
"$('#sub').html('updated via jquery');" +26
"</scr" + "ipt>";27
runScripts(this);28
};29
function runScripts(element) {30
var scripts;31
32
// Get the scripts33
scripts = element.getElementsByTagName("script");34
35
// Run them in sequence (remember NodeLists are live)36
continueLoading();37
38
function continueLoading() {39
var script, newscript;40
41
// While we have a script to load...42
while (scripts.length) {43
// Get it and remove it from the DOM44
script = scripts[0];45
script.parentNode.removeChild(script);46
47
// Create a replacement for it48
newscript = document.createElement('script');49
50
// External?51
if (script.src) {52
// Yes, we'll have to wait until it's loaded before continuing53
display("Loading " + script.src + "...");54
newscript.onerror = continueLoadingOnError;55
newscript.onload = continueLoadingOnLoad;56
newscript.onreadystatechange = continueLoadingOnReady;57
newscript.src = script.src;58
}59
else {60
// No, we can do it right away61
display("Loading inline script...");62
newscript.text = script.text;63
}64
65
// Start the script66
document.documentElement.appendChild(newscript);67
68
// If it's external, wait for callback69
if (script.src) {70
return;71
}72
}73
74
// All scripts loaded75
newscript = undefined;76
77
// Callback on most browsers when a script is loaded78
function continueLoadingOnLoad() {79
// Defend against duplicate calls80
if (this === newscript) {81
display("Load complete, next script");82
continueLoading();83
}84
}85
86
// Callback on most browsers when a script fails to load87
function continueLoadingOnError() {88
// Defend against duplicate calls89
if (this === newscript) {90
display("Load error, next script");91
continueLoading();92
}93
}94
95
// Callback on IE when a script's loading status changes96
function continueLoadingOnReady() {97
98
// Defend against duplicate calls and check whether the99
// script is complete (complete = loaded or error)100
if (this === newscript && this.readyState === "complete") {101
display("Load ready state is complete, next script");102
continueLoading();103
}104
}105
}106
}107
function display(msg) {108
var p = document.createElement('p');109
p.innerHTML = String(msg);110
document.body.appendChild(p);111
}112
</script>113
</body>114
</html>115
And here’s your fiddle updated to use the above where we turn the NodeList into an array:
HTML:
JavaScript
1
4
1
<body>2
Hello world223
</body>4
Script:
JavaScript
1
88
88
1
var model = {2
'template': 'tu003chtmlu003ernttu003cheadu003erntttu003ctitleu003eaaau003c/titleu003erntttu003cscript src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"u003eu003c/scriptu003erntttu003cscript type=u0027text/javascriptu0027u003ealert($(u0027bodyu0027).html());u003c/scriptu003ernttu003c/headu003ernttu003cbodyu003erntttHello worldrnttu003c/bodyu003erntu003c/htmlu003e'3
};4
document.documentElement.innerHTML = model.template;5
6
function runScripts(element) {7
var list, scripts, index;8
9
// Get the scripts10
list = element.getElementsByTagName("script");11
scripts = [];12
for (index = 0; index < list.length; ++index) {13
scripts[index] = list[index];14
}15
list = undefined;16
17
// Run them in sequence18
continueLoading();19
20
function continueLoading() {21
var script, newscript;22
23
// While we have a script to load...24
while (scripts.length) {25
// Get it and remove it from the DOM26
script = scripts[0];27
script.parentNode.removeChild(script);28
scripts.splice(0, 1);29
30
// Create a replacement for it31
newscript = document.createElement('script');32
33
// External?34
if (script.src) {35
// Yes, we'll have to wait until it's loaded before continuing36
newscript.onerror = continueLoadingOnError;37
newscript.onload = continueLoadingOnLoad;38
newscript.onreadystatechange = continueLoadingOnReady;39
newscript.src = script.src;40
} else {41
// No, we can do it right away42
newscript.text = script.text;43
}44
45
// Start the script46
document.documentElement.appendChild(newscript);47
48
// If it's external, wait49
if (script.src) {50
return;51
}52
}53
54
// All scripts loaded55
newscript = undefined;56
57
// Callback on most browsers when a script is loaded58
59
function continueLoadingOnLoad() {60
// Defend against duplicate calls61
if (this === newscript) {62
continueLoading();63
}64
}65
66
// Callback on most browsers when a script fails to load67
68
function continueLoadingOnError() {69
// Defend against duplicate calls70
if (this === newscript) {71
continueLoading();72
}73
}74
75
// Callback on IE when a script's loading status changes76
77
function continueLoadingOnReady() {78
79
// Defend against duplicate calls and check whether the80
// script is complete (complete = loaded or error)81
if (this === newscript && this.readyState === "complete") {82
continueLoading();83
}84
}85
}86
}87
runScripts(document.documentElement);88
This approach just occurred to me today when reading your question. I’ve never seen it used before, but it works in IE6, IE8, Chrome 26, Firefox 20, and Opera 12.15.