Conditionally load JavaScript file

Question

I need a JS statement that determine which JavaScript file to use.

I have one file:

<script type="text/javascript" src="js/jquery_computer.js"></script>

But when the screen width is less than 500px, I want load another file instead:

<script type="text/javascript" src="js/mobile_version.js"></script>

I have tried everything and it is not working.

Answer 1

You'd have to create that markup yourself in JS. Something like this:

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);

Answer 2

If you want the script loaded asynchronously, the other answers here do that.

If you want it loaded synchronously with page load, this is one of the very, very few remaining valid uses cases for document.write:

<script>
(function() { // Scoping function to avoid globals
    var src = /*you want the main version*/ ? "jquery_computer.js" : "mobile_version.js";
    document.write('<script src="js/' + src + '"><\/script>');
})();
</script>

(I've removed type because JavaScript is the default, specifying it isn't useful.)

Answer 3

Maybe you can use matchMedia.js and can load a script using jQuery.getScript

$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});

Answer 4

Best would be to use built-in matchMedia API.

var script = document.createElement('script');
script.type='text/javascript';

if(window.matchMedia("(min-width:500px)").matches) {
  script.src = 'js/jquery.slitslider.js';      
}else{
  script.src = 'js/mobile_version.js';      
}

document.getElementsByTagName('head')[0].appendChild(script);

Drawback is that it is not supported in IE < 10

Answer 5

You don't need jQuery for this, it suffices to create the <script> tag in the DOM dynamically:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.type = 'text/javascript';

if (<screen-width less than 500>)
    script.src = "js/mobile_version.js";
else
    script.src = "js/jquery_computer.js";

head.appendChild(script);