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:

Answer

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

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

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

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

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);
Answer
$(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

Answer

you can use $.getScript in jQuery

see here for details

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.