Conditionally load JavaScript file

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.

Answers


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);

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(...);
    }
});

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


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.)


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);

$(function(){
    var width = $(document).width(),
        mobile = 500;

    if (width > mobile) {
        $('head').append('<script class="desktop" type="text/javascript" src="js/jquery_computer.js"></script>');
        $('head').find('.mobile').remove();
    } 
    else
    {
        $('head').append('<script class="mobile" type="text/javascript" src="js/mobile_version.js"></script>');
        $('head').find('.desktop').remove();
    }
});

just use if else to detect condition and use class on script element may be it help


you can use $.getScript in jQuery

see here for details


Need Your Help

TFS merge changeset into file with pending change

tfs merge

I have a feeling this is a very stupid question, but I can't find the answer anywhere.

Trouble removing rake 0.9

ruby-on-rails ruby

I am having some trouble removing the rake gem version 0.9. I managed to run gem uninstall rake and I believed this to have deleted it. However, going back to gem list it still showed that it still