Есть ли простой способ перезагрузить CSS без перезагрузки страницы?

Question

Я пытаюсь создать работающий внутристраничный редактор CSS с функцией предварительного просмотра, который перезагрузил бы таблицу стилей и применил бы ее без необходимости перезагрузки страницы. Каков наилучший способ сделать это?

Answer 1

Возможно, не подходит для вашей ситуации, но вот функция jQuery, которую я использую для перезагрузки внешних таблиц стилей:

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

Answer 2

На странице «Редактировать» вместо включения вашего CSS обычным способом (с тегом <link>) запишите все это в тег <style>. Изменение свойства innerHTML, которое автоматически обновляет страницу, даже без обращения к серверу.

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

Javascript, использующий jQuery:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

И это должно быть!

Если вы хотите быть по-настоящему модным, присоедините функцию к клавише на текстовой области, хотя вы можете получить некоторые нежелательные побочные эффекты (страница будет постоянно меняться при вводе)

Редактировать : протестировано и работает (по крайней мере, в Firefox 3.5, хотя должно быть хорошо с другими браузерами). Смотри демо здесь: http://jsbin.com/owapi

Answer 3

Ознакомьтесь с шикарным проектом Vogue Эндрю Дэйви - http://aboutcode.net/vogue/

Answer 4

Еще одно решение jQuery

Для отдельной таблицы стилей с идентификатором "css" попробуйте это:

$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');

Оберните его в функцию, имеющую глобальный масштаб, и вы можете использовать ее из консоли разработчика в Chrome или Firebug в Firefox:

var reloadCSS = function() {
  $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};

Answer 5

Для этого совершенно не нужно использовать jQuery. Следующая функция JavaScript перезагрузит все ваши CSS-файлы:

function reloadCss()
{
    var links = document.getElementsByTagName("link");
    for (var cl in links)
    {
        var link = links[cl];
        if (link.rel === "stylesheet")
            link.href += "";
    }
}

Answer 6

Более короткая версия в Vanilla JS и в одну строку:

for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())

Или расширенный:

for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
  link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())
}

Answer 7

На основе предыдущих решений я создал закладку с кодом JavaScript:

javascript: { var toAppend = "trvhpqi=" + (new Date()).getTime(); var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") { if (link.href.indexOf("?") === -1) { link.href += "?" + toAppend; } else { if (link.href.indexOf("trvhpqi") === -1) { link.href += "&" + toAppend; } else { link.href = link.href.replace(/trvhpqi=\d{13}/, toAppend)} }; } } }; void(0);

Изображение из Firefox:

Что это делает?

Это перезагружает CSS, добавляя параметры строки запроса (как решения выше):

• Content / Site.css становится Content / Site.css? Trvhpqi = 1409572193189 (добавляет дату)
• Content / Site.css? Trvhpqi = 1409572193189 становится Content / Site.css? Trvhpqi = 1409572193200 (дата изменяется)
• http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext становится http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext&trvhpqi=1409572193189 (добавляет новый параметр строки запроса с датой)

Answer 8

Простым образом вы можете использовать rel = "reload" вместо rel = "stylesheet" .

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">

Answer 9

Еще один ответ: Есть букмарклет под названием ReCSS . Я не использовал это широко, но, кажется, работает.

На этой странице есть букмарклет, который можно перетащить в адресную строку (кажется, здесь его нет). В случае, если это сломано, вот код:

javascript:void(function()%7Bvar%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i%3Ca.length;i++)%7Bs=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')%3E=0&&s.href)%20%7Bvar%20h=s.href.replace(/(&%7C%5C?)forceReload=%5Cd%20/,'');s.href=h%20(h.indexOf('?')%3E=0?'&':'?')%20'forceReload='%20(new%20Date().valueOf())%7D%7D%7D)();

Answer 10

Теперь у меня есть это:

    function swapStyleSheet() {
        var old = $('#pagestyle').attr('href');
        var newCss = $('#changeCss').attr('href');
        var sheet = newCss +Math.random(0,10);
        $('#pagestyle').attr('href',sheet);
        $('#profile').attr('href',old);
        }
    $("#changeCss").on("click", function(event) { 
        swapStyleSheet();
    } );

создайте любой элемент на вашей странице с идентификатором changeCss с атрибутом href с новым URL-адресом CSS и элемент ссылки с начальным css:

<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />

<img src="click.jpg" id="changeCss" href="css2.css?t=">