CODEWITHSUNDEEP
javascripthtml
user2190308
user2190308

Reputation: 791

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.

Upvotes: 77

Views: 95690

Answers (8)

Endless
Endless

Reputation: 37815

You could use the async import() if you like.

import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')

In a script tag with <script type="module"> or inside a module loaded with import() from a regular <script> you can also use top-level await in the newest (experimental) browsers

<script type="module">
  await import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')      
</script>

But it won't work for every script.

  • A common reason why is those UMD module bundler that adds a closure
    (function(global){...}(this)) since this is undefined in modules.
  • Third party scripts needs to have CORS enable to load
  • Won't work in IE, but it's dead anyway
  • See other known differences

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074455

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

Upvotes: 39

user3755768
user3755768

Reputation: 67

$(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

Upvotes: 3

fadomire
fadomire

Reputation: 1975

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

Upvotes: 11

PSR
PSR

Reputation: 40318

you can use $.getScript in jQuery

see here for details

Upvotes: 1

The Alpha
The Alpha

Reputation: 146201

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

Upvotes: 12

Mathew Thompson
Mathew Thompson

Reputation: 56429

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

Upvotes: 75

filmor
filmor

Reputation: 32222

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

Upvotes: 7

Related Questions