Есть ли простой способ перезагрузить css без перезагрузки страницы?
Я пытаюсь сделать живой редактор css на странице с функцией предварительного просмотра, которая перезагрузит таблицу стилей и применит ее без необходимости перезагрузки страницы. Как лучше всего поступить?
11 ответов
на странице "редактировать", вместо того, чтобы включать ваш CSS обычным способом (с <link>
tag), напишите все это в <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 на textarea, хотя вы можете получить некоторые нежелательные побочные эффекты (страница будет постоянно меняться по мере ввода)
редактировать: проверено и работает (в Firefox 3.5, по крайней мере, хотя должно быть хорошо с другими браузерами). Смотрите демо здесь:http://jsbin.com/owapi
возможно, не применимо для вашей ситуации, но вот функция 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);
});
}
Проверьте шикарный проект Эндрю Дэйви Vogue -http://aboutcode.net/vogue/
еще одно решение jQuery
для одной таблицы стилей с идентификатором "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>');
};
основываясь на предыдущих решениях, я создал закладку с кодом 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, добавляя параметры строки запроса (как решения выше):
- Контент Сайта.css становится контентом / сайтом.css?trvhpqi=1409572193189 (добавляет дату)
- Контент Сайта.css?trvhpqi=1409572193189 становится контентом / сайтом.css?trvhpqi=1409572193200 (дата изменения)
- http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext становится http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext&trvhpqi=1409572193189 (добавляет новую строку запроса param с датой)
для этого абсолютно не нужно использовать 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 += "";
}
}
более короткая версия в 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())
}
простым способом вы можете использовать атрибут rel="перезагрузки" вместо rel= "таблица стилей" .
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
да, перезагрузите тег css. И не забудьте сделать новый url уникальным (обычно путем добавления случайного параметра запроса). У меня есть код, чтобы сделать это, но не со мной прямо сейчас. Отредактируем позже...
edit: слишком поздно... Харто и никф опередили меня; -)
теперь у меня есть это:
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();
} );
сделайте любой элемент на своей странице с id 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=">
другой ответ: Есть букмарклет под названием 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)();