브라우저가 CSS, 자바 스크립트 등을 새로 고침하도록 강제

브라우저가 CSS, 자바 스크립트 등을 새로 고침하도록 강제

---

XAMPP를 통해 Wordpress 소스 코드를 기반으로 웹 사이트를 개발 중입니다. 때로는 CSS 코드, 스크립 또는 다른 것을 변경하고 브라우저가 수정 사항을 적용하는 데 시간이 걸리는 것을 알았습니다. 이로 인해 여러 브라우저를 사용하여 하나를 새로 고치고 새 스타일을 적용하지 않으면 두 번째 스타일을 시도하고 항상 이것입니다.

이 문제를 피할 수있는 방법이 있습니까? 때로는 이전 수정 사항을 통보하지 않고 코드를 변경합니다.

---

일반 솔루션

Ctrl+ F5(또는 Ctrl+ Shift+ R)를 눌러 캐시를 강제로 다시로드합니다. 나는 Mac이 Cmd+ Shift+를 사용한다고 생각 R합니다.

PHP

PHP에서는 만료 날짜를 헤더가있는 과거 시간으로 설정하여 캐시를 비활성화 할 수 있습니다.

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

크롬

로 개발자 도구를 열고 F12오른쪽 하단의 톱니 바퀴 아이콘을 클릭 한 다음 설정 대화 상자에서 캐시 사용 안함을 선택하여 다음과 같이 Chrome 캐시를 사용 중지 할 수 있습니다 .

^{이 답변 에서 가져온 이미지 .}

Firefox

입력 about:config한 후 제목 항목을 찾을 URL 표시 줄에 network.http.use-cache. 이것을로 설정하십시오 false.

---

클라이언트 측에서이를 피 ?v=1.x하려면 파일 내용이 변경 될 때 css 파일 링크 와 같은 것을 추가 할 수 있습니다 . 예를 들어 <link rel="stylesheet" type="text/css" href="css-file-name.css">변경 <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">이 가능하면 캐싱을 우회합니다.

---

PHP를 작성할 수 있다면 다음과 같이 작성할 수 있습니다.

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

항상 새로 고침됩니다!

편집 : 물론 모든 웹 사이트에 대해 수동으로 추가하지 않기 때문에 전체 웹 사이트에 실제로 실용적이지 않습니다.

---

확인 : 브라우저가 내 스타일 시트의 최신 버전을 사용하도록하려면 어떻게해야합니까?

CSS 파일이라고 가정 foo.css하면 아래와 같이 쿼리 문자열을 추가하여 클라이언트가 최신 버전을 사용하도록 할 수 있습니다.

<link rel="stylesheet" href="foo.css?v=1.1">

---

개발자 관점
(원래 질문에서와 같이) 개발 모드에있는 경우 가장 좋은 방법은 HTML 메타 태그를 통해 브라우저에서 캐싱을 비활성화하는 것입니다. 이 접근 방식을 보편적으로 만들려면 아래와 같이 메타 태그를 3 개 이상 삽입해야합니다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

이러한 방식으로 개발자는 변경 사항을 확인하기 위해 페이지를 새로 고치기 만하면됩니다. 그러나 모든 캐싱은 클라이언트에게 좋은 일이므로 프로덕션 단계에서 해당 코드를 주석 처리하는 것을 잊지 마십시오.

프로덕션 모드 프로덕션
에서는 캐싱을 허용하고 클라이언트는 전체 다시로드 또는 기타 트릭을 강제하는 방법을 알 필요가 없기 때문에 브라우저가 새 파일을로드 할 것이라고 보증해야합니다. 예,이 경우 제가 아는 가장 좋은 방법은 파일 이름을 변경하는 것입니다.

---

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

수정하면 새로 고침됩니다.

---

브라우저 캐시를 지우십시오.

---

Firefox의 웹 개발자 도구 모음에서 캐싱을 끌 수 있습니다.

---

DNS에서 이런 일이 발생하지 않는지 확인하십시오. 예를 들어 Cloudflare에는 Cloudflare가 가속화 된 캐시를 제공하므로 스타일 시트와 이미지를 강제로 제거하는 개발 모드를 켤 수있는 기능이 있습니다. 이것은 그것을 비활성화하고 누군가가 귀하의 사이트를 방문 할 때마다 업데이트하도록 강제합니다.

---

이 Firefox 확장 프로그램은 제가 작업 할 수있는 유일한 솔루션이었습니다 : https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

---

위의 대답은 정확합니다. 그러나 주기적으로 만 캐시를 다시로드하고 Firefox를 사용하는 경우 웹 개발자 도구 (2015 년 11 월 현재 도구 메뉴 항목 아래)에서 네트워크 옵션을 제공합니다. 여기에는 다시로드 버튼이 포함됩니다. 일회용 캐시 재설정을 위해 다시로드를 선택합니다.

---

이러한 파일이 모든 사용자에 대해 Chrome에서 올바르게 새로 고쳐 지도록 must-revalidate하려면 Cache-Control헤더 에 있어야 합니다 . 이렇게하면 Chrome이 파일을 다시 가져와야하는지 확인합니다.

다음 응답 헤더를 권장합니다.

Cache-Control: must-validate

This tells Chrome to check with the server, and see if there is a newer file. If there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.

If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.

Here is a blog post that discusses the issue further.

---

In stead of link-tag in html-head to external css file, use php-include:

<style>
<?php
include("style.css");
?>      
</style>

Kind of hack, but works for me :)

---

I have decided that since browsers do not check for new versions of css and js files, I rename my css and js directories whenever I make a change. I use css1 to css9 and js1 to js9 as the directory names. When I get to 9, I next start over at 1. It is a pain, but it works perfectly every time. It is ridiculous to have to tell users to type .

---

I have a case, where I need to be able to create and change my stylesheets remotely affecting thousands of clients, but due to risk of heavy network load, I'm not turning off cache.

Since I can change the HTML contents remotely, I then link the stylesheet with a hashcode matching the contents of the stylesheet.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

That said, I also use a client-side javascript function to carefully replace nodes and attributes when HTML contents change, meaning the stylesheet link tag will not be replaced, only the href attribute will change.

This scenario works fine in Chrome, Firefox and Edge on Windows, also Chrome on Android, but doesn't always work in webclients on Android to my surprise. So I'm more or less looking for something to force/trigger the update using javascript - optimally without needing to reload the page.

---

Try this:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

If you need something after the '?' that is different every time the page is accessed then the time() will do it. Leaving this in your code permanently is not really a good idea since it will only slow down page loading and probably isn't necessary.

페이지 레이아웃을 광범위하게 변경 한 경우 스타일 시트 새로 고침을 강제 실행하는 것이 도움이되며 새 스타일 시트에 액세스하는 것이 화면에 적절한 것을 표시하는 데 중요하다는 것을 발견했습니다.

참고 URL : https://stackoverflow.com/questions/11474345/force-browser-to-refresh-css-javascript-etc