[javascript] 페이지를 다시로드하지 않고 CSS를 다시로드 할 수있는 쉬운 방법이 있습니까?

Program / 글쓴이

스타일 시트를 다시로드하고 페이지를 다시로드 할 필요없이 적용하는 미리보기 기능이있는 라이브 인 페이지 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

답변

귀하의 상황에 적용되지 않을 수 있지만 외부 스타일 시트를 다시로드하는 데 사용하는 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);
    });
}

답변

이를 위해 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/

답변

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 솔루션

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를 다시로드합니다 (위의 솔루션).