Итак, я хочу, чтобы некоторые файлы Javascript отображались для определенной ширины браузера. Я знаю, что @media обслуживает определенный CSS для каждой ширины браузера и некоторых устройств. Как мне сделать что-то подобное для файлов Javascript, БЕЗ использования вызовов на стороне сервера?
Возможно ли с помощью Javascript вызывать другие файлы Javascript на основе ширины браузера? Если да, How?
Спасибо заранее.
Пока я не уверен, почему вы всегда можете импортировать файлы JavaScript через JS Script.
Следующие ссылки дают некоторую информацию об этом.
В примечании стороны - Почему вы смотрите на это? Конечно, вы можете получить разрешение экрана, а затем отрегулировать вычисления/контент на основе этих переменных без необходимости изменения файлов JS. Существует так много разных разрешений (мобильные устройства, несколько мониторов, широкий экран, проекторы и т.д.). Пользователь также может изменить размер браузеров, что делает его нецелесообразным.
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) в своем дизайне и избегать этого.
Попробуйте следующее:
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")
}
Медиа-запросы - это хорошее решение для предоставления альтернативных стилей для разных окон. К сожалению, атрибут media для элемента <script> не работает аналогично.
Однако вы можете предоставить script -loading 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);
}
Выполняет эту работу, но только на основе нагрузки. Чтобы получить ответную реакцию на изменение размера окна браузера пользователем, вы должны отслеживать ширину вдовы и при необходимости обновлять страницу.
С 2011 года мир перешел в мобильную эпоху.
Вы можете попробовать: document.documentElement.clientWidth, так как он скажет вам видимую область вашей страницы - она реагирует на увеличение, но не на шаг.