스타일 시트를 다시로드하고 페이지를 다시로드 할 필요없이 적용하는 미리보기 기능이있는 라이브 인 페이지 CSS 편집기를 만들려고합니다. 이것에 대해 가장 좋은 방법은 무엇입니까?
답변:
"편집"페이지에서 일반적인 방법 ( <link>
태그 포함) 으로 CSS를 포함하는 대신 태그에 모두 작성합니다 <style>
. innerHTML
속성을 편집하면 서버로의 왕복 없이도 페이지가 자동으로 업데이트됩니다.
<style type="text/css" id="styles">
p {
color: #f0f;
}
</style>
<textarea id="editor"></textarea>
<button id="preview">Preview</button>
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
innerHTML
for <style>
elements (and <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 += "";
}
}
앤드류 데비의 세련되지 유행 프로젝트를 체크 아웃 - http://aboutcode.net/vogue/
하나 더 jQuery 솔루션
ID가 "css"인 단일 스타일 시트의 경우 다음을 시도하십시오.
$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
전역 scrope가있는 함수로 래핑하고 Chrome의 개발자 콘솔 또는 Firefox의 Firebug에서 사용할 수 있습니다.
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가 무엇이든 다시로드 할 때마다 시간이 변경되고 브라우저는 마지막 비트가 계속 변경되기 때문에 다른 파일로 생각합니다 .... U는 모든 파일에 대해이 작업을 수행 할 수 있습니다. u 원하는 스크립팅 언어를 사용하여 브라우저를 항상 새로 고치도록 강제합니다.
나는 지금 이것을 가지고있다 :
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();
} );
새 CSS URL이있는 href 속성이있는 ID changeCss로 페이지의 모든 요소를 만듭니다. 시작 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)();
이 질문은 2019 년에 stackoverflow에 표시되었으므로 더 현대적인 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);
}