Is it possible to call in a .js
file synchronously and then use it immediately afterward?
The answers above pointed me in the right direction. Here is a generic version of what I got working:
var script = document.createElement('script');
script.src = 'http://' + location.hostname + '/module';
script.addEventListener('load', postLoadFunction);
document.head.appendChild(script);
function postLoadFunction() {
// add module dependent code here
}
This looks like a decent overview of dynamic script loading: http://unixpapa.com/js/dyna.html
You can create your <script>
element with an "onload" handler, and that will be called when the script has been loaded and evaluated by the browser.
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);
You can't do it synchronously.
edit — it's been pointed out that, true to form, IE doesn't fire a "load" event on <script>
tags being loaded/evaluated. Thus I suppose the next thing to do would be to fetch the script with an XMLHttpRequest and then eval()
it yourself. (Or, I suppose, stuff the text into a <script>
tag you add; the execution environment of eval()
is affected by the local scope, so it won't necessarily do what you want it to do.)
edit — As of early 2013, I'd strongly advise looking into a more robust script loading tool like Requirejs. There are a lot of special cases to worry about. For really simple situations, there's yepnope, which is now built into Modernizr.
This isn't pretty, but it works:
<script type="text/javascript">
document.write('<script type="text/javascript" src="other.js"></script>');
</script>
<script type="text/javascript">
functionFromOther();
</script>
Or
<script type="text/javascript">
document.write('<script type="text/javascript" src="other.js"></script>');
window.onload = function() {
functionFromOther();
};
</script>
The script must be included either in a separate <script>
tag or before window.onload()
.
This will not work:
<script type="text/javascript">
document.write('<script type="text/javascript" src="other.js"></script>');
functionFromOther(); // Error
</script>
The same can be done with creating a node, as Pointy did, but only in FF. You have no guarantee when the script will be ready in other browsers.
Being an XML Purist I really hate this. But it does work predictably. You could easily wrap those ugly document.write()
s so you don't have to look at them. You could even do tests and create a node and append it then fall back on document.write()
.
This works for modern 'evergreen' browsers that support async/await and fetch.
This example is simplified, without error handling, to show the basic principals at work.
// This is a modern JS dependency fetcher - a "webpack" for the browser
const addDependentScripts = async function( scriptsToAdd ) {
// Create an empty script element
const s=document.createElement('script')
// Fetch each script in turn, waiting until the source has arrived
// before continuing to fetch the next.
for ( var i = 0; i < scriptsToAdd.length; i++ ) {
let r = await fetch( scriptsToAdd[i] )
// Here we append the incoming javascript text to our script element.
s.text += await r.text()
}
// Finally, add our new script element to the page. It's
// during this operation that the new bundle of JS code 'goes live'.
document.querySelector('body').appendChild(s)
}
// call our browser "webpack" bundler
addDependentScripts( [
'https://code.jquery.com/jquery-3.5.1.slim.min.js',
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'
] )