it-swarm.com.ru

Перезагрузите таблицы стилей CSS с помощью JavaScript

Я хочу перезагрузить все таблицы стилей CSS в HTML-странице с помощью JavaScript, без перезагрузки страницы.

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

Возможное решение - добавить суффикс ?id=randomnumber к hrefs css с помощью javascript, но я не хочу этого делать. 

Я хочу каким-то образом перезагрузить таблицу стилей, не меняя ее URL, и браузер решит, нужно ли ему загружать новую версию этого CSS или нет (если сервер отвечает 304 - Not modified).

Как это сделать?

14
Tamás Pap

В простом Javascript:

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

В jQuery:

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

Убедитесь, что вы загружаете эту функцию после загрузки дерева DOM.

9
Dillen Meijboom

Есть намного лучше способы сделать это:

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

Один из способов - использовать Grunt.js to watch для изменений файла, а затем livereload страницу.

Рабочий процесс выглядит так:

  • Сохранить документ CSS
  • Ворчливые часы видят изменения
  • live перезагружает CSS на странице

Это может быть связано с другими функциями Grunt, такими как компиляция препроцессора {sass | less | stylus}, для создания рабочего процесса, подобного этому:

  • сохранить файл Sass
  • часы видят изменения
  • sass компилируется и минимизируется в cdn location
  • новый CSS загружен на страницу

Другие ресурсы внешней автоматизации:

Видео от сотрудника Google: http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

3
Michael Jasper

Сначала добавьте идентификатор (если он отсутствует) в теги ссылок таблицы стилей, например, так:

<link id="mainStyle" rel="stylesheet" href="style.css" />

Затем в Javascript (также использующий jQuery) добавьте следующую функцию:

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

Наконец, запустите функцию на желаемое событие:

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

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

Если у вас возникли проблемы с кешем, попробуйте добавить случайный (psuedo) номер версии к вашему имени файла, например так:

var restyled = 'style.css?v='+Math.random(0,10000);

Надеюсь это поможет. Приведенные выше примеры Диллена также работают, но вы можете использовать это, если хотите нацелить одну или несколько таблиц стилей с небольшими изменениями.

2
ChongFury

Это очень просто в браузере Google Chrome.

Нажмите F12, щелкните на зубчатом колесе в правом нижнем углу и выберите опцию Отключить кэш (когда открыт DevTools).

enter image description here

enter image description here

0
Warlock

Альтернативой для Grunt будет использование Prepros .

Он также использует средство просмотра файлов в папке вашего проекта, но для всех ваших файлов. (JS, CSS, PHP) и перезагрузить страницу при каждом изменении. (+ Если это небольшое визуальное изменение, такое как css, оно не обновит страницу, оно сделает плавный переход. (Работает с цветами, позиционированием и т.д.))

Как и Grunt, он компилирует и минимизирует ваши файлы и позволяет вам делать предварительный просмотр по указанному URL-адресу (не только localhost). (Есть еще много функций)

Используя специальный порт, он даже синхронизирует события, такие как щелчки, колесо мыши, вводы и т.д. 

0
Humbertda