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

Javascript to dynamically insert plugins and code

I'm trying to provide my users with a single <script> tag that will add some plugins to the page and execute some javascript code. I'm providing my users with a code snippet like this, and asking them to add it anywhere within the body of their website:
<script type="text/javascript" src="//my-domain/code?s=1a2b3c4d&t=faq&cb=1408412749" async></script>
In the response, I have the following Javascript code:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
document.body.appendChild(script);
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
As you can see, I'm trying to add Jquery to the page, and then namespace it in case Jquery already exists. The problem is that when the code executes, I'm receiving this error:
Uncaught ReferenceError: jQuery is not defined
So, clearly jQuery is not loaded yet when the namespacing code executes, but I don't understand why. Shouldn't jQuery be defined at this point?

The script.onload function seems to have solved the problem:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
script.onload = function(){
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
}
document.body.appendChild(script);

Can't insert js programmatically if it uses document.write

I am trying to insert js files programmatically, using jquery and something like this:
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://someurl/test.js';
$('body').append(script);
It works fine, if test.js contains an alert or some simple code it works fine, but if the file test.js contains document.write, and the file including the js is hosted on another domain than test.js (or localhost), nothing happens and firebug shows the error :
A call to document.write() from an asynchronously-loaded external
script was ignored.
If the test.js and the file that include it are hosted on the same domain, on chrome it still wont work but on firefox the document.write gets executed fine but the page stays "loading" forever and sniffer show request to all the files with "pending" status.
What other methods to include js files programmatically could I try?

use innerHTML instead of using document,write.
and use following code to register script,
(function() {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.async = true;
jq.src = 'http://someurl/test.js';
var s = document.body.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jq, s);
})();

Document.write is ONLY for synchronous tasks when the html is loaded (for the very first time), never for asynchronous tasks like the one you are trying to do.

What you want to do is dynamically insert a <script> DOM element into the HEAD element. I had this script sitting around. As an example, it's a race condition, but you get the idea. Call load_js with the URL. This is done for many modern APIs, and it's your best friend for cross-domain JavaScript.
<html>
<head>
<script>
var load_js = function(data, callback)
{
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = data;
head.appendChild(script);
if(callback != undefined)
callback();
}
load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");
setTimeout(function() {
$('body').html('loaded');
}, 1000);
</script>
</head>
<body></body>
</html>

There isn't anything wrong with your approach to inserting JavaScript. document.write just sucks a little bit. It is only for synchronous tasks, so putting a document.write in a separate script file is asking for trouble. People do it anyway. The solution I've seen most often for this is to override document.write.

load external javascript in rails

I would like to download javascript files in parallel via injecting the script element and the src of the file in js like so
:javascript
var script = document.createElement("script");
script.src = "/javascript/some_javascript_file.js";
script.type = "text/javascript"
$("head").append(script)
....
(using haml, jquery..)
in rails via firebug i get a 404 file not found which looks like this
GET http://localhost:3000/javascript/%5object%20HTMLScriptElement%5D 404 Not found
..i see that the other js files added via javascript_include_tag loading fine
GET http://localhost:3000/javascript/another_js_file.js?1221321321 ...
I know that rails adds a version number onto the js file for versioning. Is it not possible to load js dynamically like how i am doing for this reason? I also noticed that the script name is also obfuscated(%5object%20HTMLScriptElement%5D). Is there a rails way of doing this? I have looked online and could not find anything.
I just noticed that the url for the 404 is different from what i specified in the src. In the src i have "/rails/javascripts/javascript_file.js" but in the 404 error its listed as getting the file from http://localhost.admeld.com:3000/rails/some_namespace/%5Bobject%20HTMLScriptElement%5D
Edit:
The jquery getScript call worked.
$.getScript('/rails/javascripts/javascript_file.js', function(data, textStatus){
console.log(data); //data returned
console.log(textStatus); //success
console.log('Load was performed 0.');
});

Try this:
:javascript
var script = document.createElement("script");
script.src = "/javascript/some_javascript_file.js";
script.type = "text/javascript"
$("head").get(0).appendChild(script);