Как отключить определенный JS-файл в зависимости от разрешения экрана?

Question

[Владислав Бойченко]

Доброго времени суток.
Использую сетку Bootstrap, все остальное из него отключено. Подключен скрипт для вертикального полноэкранного скроллинга секций контента. У секций ширина и высота - по 100%, свойство overflow - hidden. На ПК/ноуте все выглядит прилично, контент в блоки вмещается, но если уменшить размер окна, то видно только часть контента, остальное прячется из-за overflow: hidden. Поэтому для маленьких разрешений экрана хочу отключить этот скрипт, чтобы был стандартный скроллинг, а не по секциям.
В гугле находил способы через if (с таким экраном) {делай то} else {делай то}, но они немного, то есть вообще не работают.
Поэтому и обращаюсь сюда: как отключить JS-файл в зависимости от размеров окна? Так сказать, медиа-запросы для JS, что ли.

Answer 1

[Андрей]

При загрузке страницы можно выбирать какие скрипты подключать следующим образом:

<script>
If (document.body.clientWidth>768){
	document.write('<script src=...>')
}
</script>

Comments

[Владислав Бойченко]

Написал таким образом:

Но оно не работает. Обновлял страницу при разных размерах окна.

[Андрей]

Владислав Бойченко: да, я слегка протупил, в момент загрузки document.body еще не будет существовать.
Нужно изменить код, вместо document.body.clientWidth писать screen.width. В этом случае будет проверяться ширина экрана а не браузера. И еще, закрывающий тег в тексте внутри document.write нужно разделить кавычками и знаком плюса. Пример вот тут > andrewg.ru/test.html

Но вообще, по-хорошему, вам нужно не таким образом проверять ширину, а дописать проверку ширины экрана в js бутстрапа. Либо написать свою аналогичную библиотеку.

[Владислав Бойченко]

Андрей: Как бы я этого не желал, оно все равно не работает -_-

<script>
if (screen.width>768){
  document.write("<script src='js/jquery.fullPage.js'></scr"+"ipt>");
}
</script>

[Андрей]

Владислав Бойченко: я добавил ваш код на ту страницу, ссылку на которую я указал выше, и она стала запрашивать файл, который указан в вашем коде (вы можете сами в этом убедиться - в отладчике браузера можно увидеть что сервер вернул 404, т.к. данного файла у него нет).
Я хочу пояснить - screen.width возвращает разрешение экрана, которое сообщает браузер. Это разрешение не обязательно будет физическим, мобильные браузеры возвращают эмулированное разрешение. Я добавил на эту страницу код, который отображает ширину браузера, возвращаемую этой командой. Пробуйте и проверяйте

[Владислав Бойченко]

Андрей: да, моя ошибка, оно не работало, я и не проверял исходный код страницы. Сейчас посмотрел - оно вывело строчку подключения нужного срипта, путь правильный, и вроде бы все хорошо, вот только оно не работает. То есть я даже конструкцию if убрал, просто вывел document.write();, и в коде страницы все правильно написалось, но - не рабоатет.
Перелистал уже с десяток зарубежных форумов - ничего.

[Владислав Бойченко]

Андрей: и да, попробывал вывести просто alert(); между <script> и </scr"+"ipt> - и о чудо, оно вывело. Впихнул код вызова функции - эффекта ноль.

[Андрей]

Владислав Бойченко: в таком случае, было бы неплохо посмотреть ваш код, или хотя бы вывод ошибок консоли

[Владислав Бойченко]

Я не верю сам, но оно заработало -_-
Вот только работает оно не до конца. Если на примерах -то для началла я ввел ширину 1400px (у меня - 1366):

<script>
if (screen.width>1400){
  document.write("<script src='js/jquery.fullPage.js'></scr"+"ipt>");
}
</script>

И скрипт не работал, что логично. Потом я ввел 768px:

<script>
if (screen.width>768){
  document.write("<script src='js/jquery.fullPage.js'></scr"+"ipt>");
}
</script>

Скрипт заработал, что тоже логично. Вот только когда я изменил ширину окна до значения меньше 768px, даже обновив страницу, серипт работать не перестал. То есть он включается как бы на 1 раз, и даже работает, но не работает после изменения размеров окна.

[Владислав Бойченко]

Андрей: но, кстати, только что скинул архив на телефон, рапаковал, и полет нормальный, скрипт отключен, поэтому, думаю, вопрос решен, большое спасибо. Все было элементарно с:

[Андрей]

Я тут почитал про этот ваш скрипт, и, думаю, есть более элегантное решение.
Вам нужно отключать Jquery.fullPage, верно?
Если смотреть на документацию с гитхаба, то они рекомендуют включать его вот так
$(document).ready(function() {
$('#fullpage').fullpage();
});
Я вам предлагаю включать его иначе

$(document).ready(function() {
if ($(document).width()>768) $("#fullpage").addClass("fp-enabled");
$('#fullpage.fp-enabled').fullpage();
});

Этот способ кроссбраузерно решит вашу проблему без неожиданных сюрпризов и js-кода, который я вам предлагал написать

[Андрей]

Владислав Бойченко: либо просто
if ($(document).width()>768) $('#fullpage.fp-enabled').fullpage();
});
но это уже по ситуации, смотря что нужно будет делать потом

[Владислав Бойченко]

Андрей: а вот это решение и работает, и выглядит приятнее. Да и как работает - в зависимости от размеров окна, даже обновлять не надо. Искренне благодарю, ночь мучений не прошла зря, спасибо!