화면단에서 css Nocash로 가져오기.

경로와 파일명이 동일하면 브라우저가 자동으로 캐쉬된 데이터를 가져온다.

때문에 css를 수정후 테스트할때는 보통 css파일 뒤에 난수를 붙여서 결과를 확인한다.

(브라우저로 하여금 동일한 파일이라고 판단하지 않고 매번 CDN에서 가져오도록-)

 

근데 동생이 매번 val뒤에 난수붙여주기 귀찮다고 징징대서 이렇게도 가능하지 않을까- 해서 만들어봤당.

function getCssWithRandomValue(cssHref){
  if(!cssHref) return;
  
  var now = new Date().getTime()
  var link = document.createElement('link')
  link.async = true
  link.href = cssHref + "?val=" + now
  link.rel = "stylesheet"
  link.type = "text/css"
  document.getElementsByTagName('head')[0].append(link)	//head밑에 link태그 붙이기.
}

<!-- 가능하면 header에 넣기. -->
<script> getCssWithRandomValue("http://example.com/css/testCss.css") </script>