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

Я пытаюсь сделать live-in-page css-редактор с функцией предварительного просмотра, которая перезагрузит таблицу стилей и применит ее, не перезагружая страницу. Какой был бы лучший способ сделать это?

Ответ 1

На странице редактирования, вместо обычного 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;
    });
});

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

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

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

Ответ 2

Возможно, это неприменимо для вашей ситуации, но здесь функция 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);
    });
}

Ответ 3

Отъезд Andrew Davey snazzy Проект Vogue - http://aboutcode.net/vogue/

Ответ 4

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

Для одной таблицы стилей с id "css" попробуйте следующее:

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

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

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

Ответ 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 += "";
    }
}

Ответ 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())
}

Ответ 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 (добавляет новый параметр строки запроса с датой)

Ответ 8

Да, перезагрузите тег css. И не забудьте сделать новый url уникальным (обычно путем добавления произвольного параметра запроса). У меня есть код, чтобы сделать это, но не со мной прямо сейчас. Будет позже редактировать...

edit: слишком поздно... harto и nickf избили меня, -)

Ответ 9

i теперь это:

    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=">

Ответ 10

Другой ответ: Там есть букмарклет, называемый 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)();

Ответ 11

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

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

Ответ 12

просто, если вы используете PHP Просто добавьте текущее время в конце CSS, как

<link href="css/name.css?<?php echo 
time(); ?>" rel="stylesheet">

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