Dynamically added script will not execute
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);
});
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');
});