Перезагрузка стилей CSS с помощью javascript

Я хочу перезагрузить все таблицы стилей CSS на html-странице через javascript, не перезагружая страницу.

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

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

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

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

Ответ 1

В простом 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.

Ответ 2

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

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

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

Рабочий процесс выглядит следующим образом:

Сохранить документ css
Часы Grunt видят изменение
live перезагружает css на странице

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

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

Другие ресурсы автоматизации переднего плана:

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

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

http://aboutcode.net/vogue/

Ответ 3

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

<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);

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

Ответ 4

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

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

Ответ 5

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

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

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

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