Условно загрузить файл JavaScript

Мне нужен оператор JS, который определяет, какой файл JavaScript использовать.

У меня есть один файл:

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

Но когда ширина экрана меньше 500 пикселей, я хочу загрузить вместо него другой файл:

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

Я пробовал все, и он не работает.

Ответы

Ответ 1

Вам нужно будет создать эту разметку самостоятельно в JS. Что-то вроде этого:

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

Ответ 2

Возможно, вы можете использовать matchMedia.js и можете загрузить script с помощью jQuery.getScript

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

Ответ 3

Лучше всего было бы использовать встроенный API matchMedia.

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

Недостатком является то, что он не поддерживается в IE < 10

Ответ 5

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

просто используйте if else, чтобы обнаружить условие и использовать класс в элементе script может быть это помощь

Ответ 6

Для этого вам не нужен jQuery, достаточно создать тег <script> в DOM динамически:

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