Как определить изменение размера окна, а затем изменить файл javascript, добавляемый в заголовок?

У меня есть этот jQuery, чтобы определить размер экрана, а затем добавить файл в заголовок на основе размера сцены.

var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
  scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
  scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Я пытался использовать с ним $(window).resize(), но мне не удалось удалить файл, который был первоначально добавлен до запуска изменения размера.

У меня есть JSFIDDLE, чтобы вы могли изменить мой код, и, как вы видите, он добавит файл js на основе размер экрана, но я бы хотел, чтобы он изменился, если экран тоже.

Спасибо за ваше время!


javascript jquery window-resize
person Amir5000    schedule 28.04.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вот что я использую:

$(window).bind('resize', function(event) {      
//Whatever you want to run here     

});

Просто установите переменную для ширины и высоты окна и проверьте, что они находятся внутри этой функции.

Что касается изменения файла javascript при изменении размера экрана без перезагрузки всей страницы... Я не думаю, что это возможно. Обходной путь может состоять в том, чтобы импортировать все файлы javascript в один файл и просто запускать разные функции, которые перезаписывают любые изменения, внесенные последней функцией javascript.

Это, очевидно, использует jQuery.

person mcphersonjr    schedule 28.04.2014
comment
это хорошо, но такая же проблема с тем, как он будет добавлять файл несколько раз, а также не удалять дубликаты. Значит, вы думаете, что нет другого способа, кроме как перезагрузить страницу? - person Amir5000; 29.04.2014
comment
Вы можете добавить к html-документу новый файл сценария, но вам придется запустить функцию для этого файла. Поэтому вместо того, чтобы возиться с этим, я бы просто взял один мастер-файл, в который включены все остальные ваши файлы, и просто запустил бы функцию. Каков конечный результат изменения файлов javascript? - person mcphersonjr; 29.04.2014
comment
ну, у меня есть несколько каруселей jQuery, которые я хочу использовать только для настольных компьютеров, а для мобильных устройств у меня есть несколько сенсорных событий, которые я не хочу загружать на больших экранах. и несколько подобных вещей. - person Amir5000; 29.04.2014
comment
Если вы просто хотите добавить и удалить файлы javascript из html-документа, просто добавьте атрибут src тегов script внутри этой функции. Но это не запустит новый файл. Вам нужно будет как-то запустить функцию. Вот почему я предлагаю использовать мастер-файл. Тогда вам просто не нужно возиться с изменением источника сценария... просто вызовите новую функцию. - person mcphersonjr; 29.04.2014
comment
да, я понимаю, что вы говорите, подумал, что попытаю счастья с тем, что у меня уже есть. - person Amir5000; 29.04.2014
comment
Нашел это также http://stackoverflow.com/a/10054132/2433381 - person mcphersonjr; 29.04.2014

arrow_upward
0
arrow_downward

Добавьте свой код в функцию обратного вызова для события изменения размера.

$(window).resize(function(elem){
    var scriptSrc = '';
    var widowWidth = $(window).width();
    if(widowWidth >= 1024)
      scriptSrc = '/js/desktop.js';
    if((widowWidth <= 1023) && (widowWidth >= 768))
      scriptSrc = '/js/tablet.js';
    else if(widowWidth <= 767)
      scriptSrc = '/js/mobile.js';
    var script = document.createElement('script');
    script.src = scriptSrc;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
});

Функция обратного вызова будет вызываться при изменении размера окна. Однако событие будет срабатывать для каждого пикселя изменения размера окна, так что будьте к этому готовы.

person danny slade    schedule 28.04.2014
comment
Да, это то, что я пробовал раньше, и, как я уже сказал, мне не удалось удалить тот, который загружается, и добавить новый только один раз. нет ли способа не сделать это? - person Amir5000; 28.04.2014
comment
вы можете попробовать использовать метод .remove(). Я нашел эту ссылку, которая может помочь - stackoverflow.com/questions/8503560/ - person danny slade; 29.04.2014

arrow_upward
0
arrow_downward

Если я правильно понимаю ваш вопрос, вы хотите прослушать событие изменения размера окна.

var onsize = function() {
    var W = $(window).width();
    if(W >= 500) {
      test.html('/js/desktop.js');
    } else if(W >= 300) {
      test.html('/js/tablet.js');
    } else { //if(widowWidth <= 767)
      test.html('/js/mobile.js');
    }
};

Я добавил div для отображения вывода.

$(окно).изменить размер(на размер);

Вот скрипт http://jsfiddle.net/devm33/aC8Ez/

person Dev Mehta    schedule 28.04.2014
comment
Я хочу, чтобы при загрузке страницы загружался один из файлов js в зависимости от размера окна, а затем, если размер окна снова изменяется после загрузки страницы, чтобы продолжать проверять размер, а затем добавлять файл и соответственно удалять другой - person Amir5000; 29.04.2014