根据用户输入动态加载外部Javascript文件

Question

I have N different javascript files and I would like to load only one of them in my HTML code based on a user input. Can someone point me towards how I can accomplish this? Thanks!

Answer 1

You can always dynamically insert a <script> tag into your DOM depending on some input:

var myScript = document.createElement('script');
myScript.setAttribute('src', 'http://example.com/somescript_depending_on_user_input.js');
document.head.appendChild(myScript);

This will dynamically inject a <script src="http://example.com/somescript_depending_on_user_input.js"></script> element into your DOM and load the desired script. Once the script is loaded from the remote url it will be evaluated by the browser.

And if you wanted to wait for the external javascript to actually be loaded (which is a different point in time compared to injecting a <script> element into your DOM) you could subscribe to the onload event. This could be quite handy if you want to call some functions that are only defined within the dynamically loaded script:

myScript.onload = function() {
    alert('Youpee, my dynamic script was successfully loaded, I can use it in this callback');
};

Also note that if you want this to work in IE as well you might need to subscribe to the onreadystatechange event as shown in this article . This will make your code to work across different browsers.