Develop Reference

How to add a script tag dynamically using javascript and detect if the script failed to load the file?

I know how to add a script tag to the body or head using append functions. But if the file (example.js) that I am trying to add is not present, it gives an error. How do I detect if this happens?

script elements have load and error events you can listen to.
Run whatever your dependent code is in a load event handler and do something else in error handler
Example loading jQuery :
var jQurl='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
var s = document.createElement('script');
s.src = jQurl;
s.onerror = function(err) {
console.log(err)
}
s.onload = init;
document.head.appendChild(s);
function init(){
console.log('jquery version=', jQuery.fn.jquery)
$('body').append('<h3>Loaded!</h3>');
}

I think you could do something like the following:
script = document.createElement('script');
script.type = 'text/javascript';
script.onerror = () => {
// Whatever you want to do in case the load fails
};
script.src = '...' // your src for the script
// After this, append the script to wherever you want in the HTML document
Hope it helps!

JS Asynchron script faild to execute

I want to include an adserver js script with javascript and load it async. But every try ends with an warning and the script isn't executed.
I get the following error message:
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
I have tried to following variants:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
Or I used the HTML Script attribute async
<script src="http://example.com/test.js" async></script>
But nothing worked, since the external script uses document.write. Is there another way to include such scripts?
How to "explicitly open" a page ("unless it is explicitly opened" - see warning)?

One way would be to overwrite document.write temporarily until the script is executed, afterwards replace original functionality.
var tempDocWrite = document.write;
document.write = function(el){
var div = document.createElement('div');
div.innerHTML = el;
document.body.appendChild(div)
}
var script = document.createElement('script');
script.onload = function(){
document.write = tempDocWrite
}
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
note: have not tested the above code

Include jQuery from another JavaScript file

I am trying to include jQuery from a javascript file. I have tried the following, although it doesn't work.
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>';
document.getElementsByTagName('head')[0].appendChild(script);

</script> closes the opening <script> block, even if it's in a string. I would do it this way:
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = document.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script)
})();

You can't have </script> anywhere inside a script block, not even inside a string, because it will end the script block there.
Break up the ending tag in the string:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></scr'+'ipt>';

Just use the jQuery getScript() method to load jQuery: http://api.jquery.com/jQuery.getScript/
...Just kidding.
Try this code:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
head.appendChild(script);
From: http://unixpapa.com/js/dyna.html
Also, if using on an https page, you will need to load the script from an https compatible CDN, like the Google Hosted Libraries (src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js")

(function() {
var script = document.createElement('script');
script.type = "text/javascript"; // keeping older browsers happy.
script.src = window.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
// browsers prevent cross-protocol downloading.
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);// In Opera a site can get by without a <head>
})();

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

using a tiny re-usable script adder:
function fetch(url){
var d=document, s='script';
d.getElementsByTagName(s)[0].parentNode.appendChild(d.createElement(s)).src=url;
}
fetch('//code.jquery.com/jquery-1.9.1.min.js');
not all pages have HEADs in all browsers, but if a script is running, so can a sibling script tag...

First of all, the variable script contains the sequence </script> which you can not make it appears as it is in your code, because browser will assume(and it must) that it is <script> tag close.
for example if your script code contains syntax error, which is a string variable that has no close " it will looks like
<script>var bad = "abcd ;</script>
to solve this you can break the </script> string like "</scr" + "ipt>" or you could escape it: "<\/script>"
so:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"><\/script>';
document.getElementsByTagName('head')[0].appendChild(script);
Second thing is that appendChild() function accept a Node element and not a string
so:
var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-1.9.1.min.js";
document.getElementsByTagName("head")[0].appendChild(script);
Anyway, I prefer to use a module and JavaScript loader like RequireJS.

Reference JS file in JS file

I have a Js function that I would like to:
Reference another js file
Pull a function out.
I would like to do this JS side and not reference on the actual page as I need this process to happen dynamically.

var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.onload = function () { document.getElementById('hello').innerText = h.innerText; };
s.src = 'http://html5shiv.googlecode.com/svn/trunk/html5.js';
h.appendChild(s);
see: http://jsbin.com/uhoger

If you're working with the browser, jQuery has an helper function for it, $.getScript.

The only option I can think of is to dynamically insert a new script tag into the page targeting your desired script from your initial javascript. Just have your initial script insert the new <script> tag on load, or upon request and then test for availability.

Appending JavaScript file reference after the last hard coded JavaScript file reference in the HEAD

Apologies if the following sounds a little strange. Am working in a legacy framework that allows no access to core templates so cannot alter the loading order of files.
What i am trying to do is load a JS file in the HEAD of the document after the final SCRIPt in said document HEAD.
I currently am using the following with no success:
var head = document.getElementsByTagName("head")[0];
var headScripts = head.getElementsByTagName("script");
var headScriptsLength = headScripts.length - 1;
var headScripts = headScripts[headScriptsLength];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/Global/ICIS/Scripts/global.js';
headScripts.appendChild(newScript);
It adds the reference to global.js directly after the block that creates it.

You better off appending your script simply to the head, and so it will become your last script.
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/Global/ICIS/Scripts/global.js';
head.appendChild(script);