jquery - 자바 스크립트로 CSS 스타일 시트 새로 고침

일반적인 자바 스크립트 :

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 트리가로드 된 후에이 함수를로드해야합니다.

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

한 가지 방법은 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/

먼저 스타일 시트 링크 태그에 다음과 같이 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 예제도 효과가 있지만 약간의 조정만으로 하나 또는 여러 개의 스타일 시트를 타겟팅하려는 경우이를 사용할 수 있습니다.

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

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

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

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

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

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