Я пытаюсь создать живой редактор CSS на странице с функцией предварительного просмотра, которая бы перезагружала таблицу стилей и применяла ее без необходимости перезагружать страницу. Как лучше всего это сделать?
javascript
css
stylesheet
reload
Стивен Белэнджер
источник
источник
Ответы:
На странице редактирования вместо того, чтобы включать ваш 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
источник
innerHTML
для<style>
элементов (и<script>
).Возможно, не применимо к вашей ситуации, но вот функция 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); }); }
источник
var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") {link.href += "?"; }}
Для этого совершенно не нужно использовать 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 += ""; } }
источник
Посмотрите шикарный проект Vogue Эндрю Дэйви - http://aboutcode.net/vogue/
источник
Более короткая версия на Vanilla JS и в одну строку:
for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?" + Date.now())
Или развернутый:
for (var link of document.querySelectorAll("link[rel=stylesheet]")) { link.href = link.href.replace(/\?.*|$/, "?" + Date.now()) }
источник
Еще одно решение 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>'); };
источник
На основе предыдущих решений я создал закладку с кодом 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, добавляя параметры строки запроса (как решения выше):
источник
просто, если вы используете php Просто добавьте текущее время в конец css, например
<link href="css/name.css?<?php echo time(); ?>" rel="stylesheet">
Итак, теперь каждый раз, когда вы перезагружаете что бы то ни было, время меняется, и браузер думает, что это другой файл, так как последний бит продолжает меняться .... U может сделать это для любого файла, вы заставите браузер всегда обновляться, используя любой язык сценариев, который вы хотите
источник
Да, перезагрузите тег css. И не забудьте сделать новый URL уникальным (обычно путем добавления случайного параметра запроса). У меня есть код для этого, но сейчас его нет. Отредактирую позже ...
изменить: слишком поздно ... Харто и Никф опередили меня ;-)
источник
Теперь у меня есть это:
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=">
источник
Другой ответ: есть букмарклет 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)();
источник
Вы можете просто использовать rel = "preload" вместо rel = "stylesheet" .
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
источник
rel="reload"
но пример говоритrel="preload"
.Поскольку этот вопрос был показан в stackoverflow в 2019 году, я хотел бы добавить свой вклад, используя более современный JavaScript.
В частности, для таблиц стилей CSS, которые не являются встроенными, поскольку это каким-то образом уже покрыто исходным вопросом.
Прежде всего, обратите внимание, что у нас до сих пор нет конструируемых объектов таблицы стилей. Однако мы надеемся, что они скоро приземлятся.
А пока предполагается следующее HTML-содержимое:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link id="theme" rel="stylesheet" type="text/css" href="./index.css" /> <script src="./index.js"></script> </head> <body> <p>Hello World</p> <button onclick="reload('theme')">Reload</button> </body> </html>
Мы могли бы иметь
index.js
:// Utility function to generate a promise that is // resolved when the `target` resource is loaded, // and rejected if it fails to load. // const load = target => new Promise((rs, rj) => { target.addEventListener("load", rs, { once: true }); target.addEventListener( "error", rj.bind(null, `Can't load ${target.href}`), { once: true } ); }); // Here the reload function called by the button. // It takes an `id` of the stylesheet that needs to be reloaded async function reload(id) { const link = document.getElementById(id); if (!link || !link.href) { throw new Error(`Can't reload '${id}', element or href attribute missing.`); } // Here the relevant part. // We're fetching the stylesheet from the server, specifying `reload` // as cache setting, since that is our intention. // With `reload`, the browser fetches the resource *without* first looking // in the cache, but then will update the cache with the downloaded resource. // So any other pages that request the same file and hit the cache first, // will use the updated version instead of the old ones. let response = await fetch(link.href, { cache: "reload" }); // Once we fetched the stylesheet and replaced in the cache, // We want also to replace it in the document, so we're // creating a URL from the response's blob: let url = await URL.createObjectURL(await response.blob()); // Then, we create another `<link>` element to display the updated style, // linked to the original one; but only if we didn't create previously: let updated = document.querySelector(`[data-link-id=${id}]`); if (!updated) { updated = document.createElement("link"); updated.rel = "stylesheet"; updated.type = "text/css"; updated.dataset.linkId = id; link.parentElement.insertBefore(updated, link); // At this point we disable the original stylesheet, // so it won't be applied to the document anymore. link.disabled = true; } // We set the new <link> href... updated.href = url; // ...Waiting that is loaded... await load(updated); // ...and finally tell to the browser that we don't need // the blob's URL anymore, so it can be released. URL.revokeObjectURL(url); }
источник