>

페이지를 다시로드하지 않고 자바 스크립트를 통해 모든 CSS 스타일 시트를 HTML 페이지에 다시로드하고 싶습니다

페이지를 항상 새로 고치지 않고 CSS 변경 사항을 반영하도록 개발하는 동안에 만 필요합니다.

가능한 해결책은 ?id=randomnumber 를 추가하는 것입니다  자바 스크립트로 CSS hrefs에 접미사를 붙이고 싶지만 그렇게하고 싶지 않습니다.

URL을 변경하지 않고스타일 시트를 다시로드하고 싶습니다. 브라우저는 해당 CSS의 새 버전을로드해야하는지 여부를 결정합니다 (서버가 304 - Not modified 로 응답하는 경우) ).

이 작업을 수행하는 방법?

  • 답변 # 1

    일반적인 자바 스크립트 :

    var links = document.getElementsByTagName("link");
    for (var x in links) {
        var link = links[x];
        if (link.getAttribute("type").indexOf("css") > -1) {
            link.href = link.href + "?id=" + new Date().getMilliseconds();
        }
    }
    
    

    jQuery에서 :

    $("link").each(function() {
        if $(this).attr("type").indexOf("css") > -1) {
            $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
        }
    });
    
    

    DOM 트리가로드 된 후에이 함수를로드해야합니다.

  • 답변 # 2

    훨씬 더 나은방법이 있습니다 :

    와이즈 비즈

    한 가지 방법은 Grunt.js를 사용하여 파일 변경 사항을 관찰 한 다음 페이지를 실시간으로 다시로드하는 것입니다.

    워크 플로우는 다음과 같습니다.

    CSS 문서 저장

    그런트 시계는 변화를 본다

    라이브가 페이지의 CSS를 새로 고침

    이것은 {sass | less | stylus} 프리 프로세서 컴파일과 같은 다른 Grunt 기능과 연결하여 다음과 같은 워크 플로우를 생성 할 수 있습니다 :

    Sass 파일 저장

    시계가 변화를 본다

    ass는 컴파일되어 cdn 위치로 축소되었습니다

    새로운 CSS가 페이지에로드되었습니다

    기타 프론트 엔드 자동화 리소스 :

    Google 직원의 동영상 : http://www.youtube.com/watch?v=bntNYzCrzvE

    http://sixrevisions.com/javascript/grunt-tutorial-01/

    http://aboutcode.net/vogue/

  • 답변 # 3

    먼저 스타일 시트 링크 태그에 다음과 같이 id (없는 경우)를 추가하십시오 :

    I need this only while developing to reflect css changes without refreshing the page all time.

    다음으로 자바 스크립트에서 (jQuery를 사용하여) 다음 함수를 추가하십시오.

    <link id="mainStyle" rel="stylesheet" href="style.css" />
    
    

    마지막으로 원하는 이벤트에서 기능을 트리거하십시오 :

    function freshStyle(stylesheet){
       $('#mainStyle').attr('href',stylesheet);
    }
    
    

    링크 된 스타일 시트의 값을 업데이트하면 같은 값이더라도 클라이언트가 다시 찾도록합니다. 최신 파일이 표시되면 최신 파일을보고 다시로드합니다.

    캐시 관련 문제가 발생하면 다음과 같이 파일 이름에 임의의 (psuedo) 버전 번호를 추가하십시오 :

    $('#logo').click(function(event){
        event.preventDefault();
        var restyled = 'style.css'; 
        freshStyle(restyled);
    });
    
    

    이것이 도움이되기를 바랍니다. 위의 Dillen 예제도 효과가 있지만 약간의 조정만으로 하나 또는 여러 개의 스타일 시트를 타겟팅하려는 경우이를 사용할 수 있습니다.

  • 답변 # 4

    GoogleChrome 브라우저에서 매우 간단합니다.

    F12를 누르고 오른쪽 하단 모서리에있는 톱니 바퀴를 클릭하고 캐시 비활성화 옵션 (DevTools가 열린 상태)을 선택하십시오.

  • 답변 # 5

    그런트의 대안은 프리 프로를 사용하는 것입니다 .

    또한 프로젝트 폴더에서 파일 감시자를 사용하지만 모든 파일에 사용합니다. (js, css, php)로 변경 될 때마다 페이지를 다시로드하십시오. (+css와 같은 작은 시각적 변경 인 경우 페이지를 새로 고치지 않고 부드럽게 전환합니다 (색상, 위치 지정 등의 작업).

    그런트처럼 파일을 컴파일하고 축소하며 지정된 URL (로컬 호스트뿐만 아니라)에서 실시간 미리보기를 할 수 있습니다.(많은 기능이 있습니다)

    특별 포트를 사용하면 클릭, 마우스 휠, 입력 등과 같은이벤트 동기화도 가능합니다

    var restyled = 'style.css?v='+Math.random(0,10000);

  • 이전 ios - Any에서 프로토콜로 다운 캐스트
  • 다음 proxy - CNTLM이 비밀번호를 요구하는 이유는 무엇입니까?