Как обслуживать разные файлы JavaScript по ширине браузера

Question

Так что я хочу определенные файлы Javascript для определенной ширины браузера. Я знаю, что @media обслуживает определенный CSS на ширину браузера и некоторые устройства. Как бы я сделал нечто подобное для файлов Javascript, БЕЗ использования вызовов на стороне сервера?

Возможно ли с помощью Javascript вызывать другие файлы Javascript в зависимости от ширины браузера? Если да, то как?

Заранее спасибо.

Answer 1

var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Может быть? Динамически загружайте их в зависимости от разрешения экрана. Можно также использовать размер документа, размер браузера и т. Д. Хотя я не уверен, что вы действительно хотите это делать. В идеале, хотя вы должны иметь дело с относительными показателями (такими как% или em) в своем дизайне и избегать этого.

Answer 2

Хотя я не уверен, почему, вы всегда можете импортировать файлы JavaScript через JS Script.

Следующие ссылки дают некоторую информацию об этом.

• http://www.kevinleary.net/loadexternal-javascript-jquery-getscript/
• http://www.stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file
• http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

На заметку - Почему вы смотрите на это?Конечно, вы можете получить разрешение экрана, а затем настроить расчеты / содержание на основе этих переменных без необходимости изменения файлов JS.Существует очень много разных разрешений (мобильные устройства, несколько мониторов, широкий экран, проекторы и т. Д.).Пользователь также может изменить размер браузера, что сделает его не стоящим.

Answer 3

Попробуйте это:

var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")

if (window.document.body.clientWidth == XXX) {
    fileref.setAttribute("src", "script1.js")
} else {
    fileref.setAttribute("src", "script2.js")

}

Answer 4

С 2011 года мир перешел в мобильную эру.

Возможно, вы захотите попробовать: document.documentElement.clientWidth, поскольку он покажет вам видимую область вашей страницы - он реагирует на увеличение, но не на высоту.

Answer 5

Медиа-запросы являются хорошим решением для предоставления альтернативных стилей для окон различной ширины. К сожалению, нет атрибута media для элемента <script>, действующего аналогично.

Однако вы можете предоставить скрипт загрузки скрипта, который будет загружать нужный файл .js в зависимости от таблицы стилей, выбранной браузером на основе вашего медиазапроса. Я не знаю, как сделать это прямым, элегантным способом, но есть хороший способ для этого. Вы должны «пометить» каждый .css уникальным объявлением (фиктивным, неважным или другим по дизайну) и проверить его изнутри JS после загрузки страницы, чтобы определить, какая таблица стилей была применена браузером.

HTML может выглядеть так:

<style media="handheld, screen and (max-width:1023px)">
    body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
    body { margin-top: 1px }
</style>

И сопровождающий JS следующим образом:

function onLoad() {
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');

    var script = document.createElement('script');
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
    head.appendChild(script);
}

Это делает работу, но только на основе нагрузки. Чтобы получить ответную реакцию на изменение размера окна браузера пользователем, вы должны следить за шириной вдовы и при необходимости перезагрузить страницу.