Существует ли простой способ перезагрузить css, не перезагружая страницу?
Я пытаюсь сделать живого, css редактора в странице с функцией предварительного просмотра, которая перезагрузила бы таблицу стилей и применила бы ее, не будучи должен перезагрузить страницу. Каков был бы лучший способ пойти об этом?
3 ответа
На странице редактирования вместо того, чтобы включать ваш CSS обычным способом (с тегом ), запишите все это в < 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
Возможно, это не относится к вашей ситуации, но вот функция 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);
});
}
Да, перезагрузи метку css. И не забудьте сделать новый url уникальным (обычно путем добавления параметра случайного запроса). У меня есть код, чтобы сделать это, но не со мной сейчас. Попозже отредактируем...
edit: too late... harto and nickf beat me to it ;-)