Dynamically added script will not execute

Question

I am dynamically adding a script of a github gist. If I added it to the html before the page loads, the script will execute. But If I try to add it to the page after it loads it adds the script to the page but doesn't execute it.

Here is how I am adding it to the page

Html

<div id="results"></div>

Javascript

$('#results').click(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
    document.getElementById('results').appendChild(script);
    console.log('script added');
});

Here is the live example

http://jsfiddle.net/guanome/JqB3g/3/

score 9 · Accepted Answer · answered Oct 25 '11 at 03:35

So, the best option I can see is to override (even if just temporarily while the script loads) document.write. It is sort of a work around, but since you don't control the code coming in, I think it may be the best you've got. You also shouldn't be using document.write anytime after the page loads, but just in case, I'd maybe comb through your code.

Here's a fiddle with a working solution. If you wanted to revert document.write after the script loaded, you can always check to see if script.complete is true, otherwise, listen for an onload event, which should allow you to change document.write back. I'm too lazy to code it into the fiddle at the moment, but this would be the code generally:

script.src = "...";
document.getElementById("results").appendChild(script);
if(script.complete) document.write = document._write;
else script.load(function() { 
    // Goes to the end of the run queue so that the script 
    // is guaranteed to run before this code
    setTimeout(function(){document.write = document._write;},0);
});

This method seems to work the best without any outside references. — FarFigNewton, Oct 26 '11 at 12:31

score 3 · Answer 2 · answered Oct 24 '11 at 21:53

3

It's executing, but it won't work since it uses document.write, which can only be used synchronously. Include async document.write, and modify your script as such:

$('#results').click(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
    document.write.to = {filename: script.src};
    document.getElementById('results').appendChild(script);
    console.log('script added');
});

answered Oct 24 '11 at 21:53

Eli Grey

35,104
14
75
93

1

... or don't use document.write in the first place if you can get away with it – hugomg Oct 24 '11 at 22:21
@missingno I would, but I don't control what github is supplying in their embed code. – FarFigNewton Oct 24 '11 at 22:45
@Eli Grey, I added your code and included async document.write to a [fiddle](http://jsfiddle.net/fewFv/2/), and it is adding the script to the page, but it's not executing the script that has been added to the page. – FarFigNewton Oct 25 '11 at 13:20

score 2 · Answer 3 · edited Oct 26 '20 at 10:51

I was able to accomplish this after hours of trying, including all other answers here. My script tag looks like this:

<script src="https://somedomain.com/some.js"></script>

so no eval() was possible.

I've used jQuery.getScript() in the end, which fetches the js file and executes it:

var $scriptTag = $('#myElement script');
var scriptSrc = $scriptTag.attr('src');
$.getScript(scriptSrc);

score 1 · Answer 4 · answered Oct 25 '11 at 18:08

1

So, as an alternative, I actually just stumbled upon a library which seems like it would handle this for you. Check out Injector.js, and it should work for you.

answered Oct 25 '11 at 18:08

LoveAndCoding

7,857
2
31
55

score 0 · Answer 5 · answered Jun 21 '13 at 16:07

0

your script is executing , you just can't use document.write from it. Use an alert to test it and avoid using document.write. The statements of your js file with document.write will not be executed and the rest of the function will be executed.

answered Jun 21 '13 at 16:07

Kunal Kinalekar

36
3

score -4 · Answer 6 · answered Oct 13 '11 at 22:35

-4

Try $(this).append(script) or $(this).html(script)

answered Oct 13 '11 at 22:35

razvancod

21
1

1

I'm not sure how that is different from what I am doing. `this` is just referring to the `#results` div. I am already doing this with basic javascript. – FarFigNewton Oct 14 '11 at 14:05

Dynamically added script will not execute

6 Answers6

Linked