除了 firefox 之外,没有其他浏览器正在加载 CSS 文件中的即时更改
No other browser except firefox is loading immediate changes in CSS file
我正在使用 PHP 制作网站。在完成它时,我只在 Firefox 上测试了它。今天,当我尝试在其他浏览器(Opera、Chrome 和 Internet Explorer)上进行测试时,我发现 CSS 中存在一些问题。当我更改我的 CSS 文件时,none 这些浏览器(Firefox 除外)显示在 CSS 文件中所做的更改。
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
到目前为止,我谷歌了很长时间后尝试的是
- 已清除浏览器缓存内存
- 在 style.css
末尾加上“?v='+1 everytime'”
- 使用'ctrl+f5'、'ctrl+r'等刷新网页
有什么帮助吗?提前致谢....
这是大多数浏览器的预期行为。每当您尝试加载页面时,如果浏览器的缓存中已经存在任何资源,它们将从那里加载。
您有两个选择:
- 为您喜欢的浏览器禁用浏览器缓存(某些浏览器允许您为特定域禁用缓存)
- 通过将非重复参数附加到请求的资源文件名,使您的
HTML
始终刷新资源。我个人使用:?v=1482939287
(其中 1482939287
是时间戳)。这将使浏览器始终刷新资源,因为它会请求浏览器缓存中不存在的版本。
示例:<link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
更新:您可以通过打开 Dev Console 刷新网页缓存 (Ctrl+Shift +I ),right-click
-点击刷新页面箭头(开发控制台打开时)并选择清空缓存和硬重新加载。即清空缓存。
您也可以禁用它,如上所示,方法是打开 Dev Console,转到 Network 选项卡并选中其下方的 "Disable Cache" 复选框。请注意,缓存 仅在您的开发者控制台打开时被禁用。
对此有多种解决方案。我将在下面列出我的一些选项。
文件的唯一标识符通过参数
在文件后面添加一个参数作为一种版本号可能会有所帮助。
在 php 中,您可以使用 time()
获取当前时间戳或使用 unique()
获取唯一字符串。
缓存设置服务器端
您还可以找到一些 .htaccess
设置,用于在服务器端缓存特定文件类型。出于性能原因,您也应该在生产环境中这样做。
浏览器开发工具
另一种方法是在开发时打开浏览器开发工具 (mostly F12)
。大多数浏览器如 Chrome 和 FF 在您的浏览器开发工具打开时提供无缓存环境。作为 chrome 中的示例,您可以显式禁用缓存。
我的建议
或者甚至更好地使用 Task Runner 来完成此任务。要搜索的关键字是'cache bust'。例如,您可以 运行 gulp
进行连接、版本控制,并让它连接您想要的正确 css 文件。这是开发阶段特别建议的。
问候
吉奥馆
我正在使用 PHP 制作网站。在完成它时,我只在 Firefox 上测试了它。今天,当我尝试在其他浏览器(Opera、Chrome 和 Internet Explorer)上进行测试时,我发现 CSS 中存在一些问题。当我更改我的 CSS 文件时,none 这些浏览器(Firefox 除外)显示在 CSS 文件中所做的更改。
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
到目前为止,我谷歌了很长时间后尝试的是
- 已清除浏览器缓存内存
- 在 style.css 末尾加上“?v='+1 everytime'”
- 使用'ctrl+f5'、'ctrl+r'等刷新网页
有什么帮助吗?提前致谢....
这是大多数浏览器的预期行为。每当您尝试加载页面时,如果浏览器的缓存中已经存在任何资源,它们将从那里加载。
您有两个选择:
- 为您喜欢的浏览器禁用浏览器缓存(某些浏览器允许您为特定域禁用缓存)
- 通过将非重复参数附加到请求的资源文件名,使您的
HTML
始终刷新资源。我个人使用:?v=1482939287
(其中1482939287
是时间戳)。这将使浏览器始终刷新资源,因为它会请求浏览器缓存中不存在的版本。
示例:<link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
更新:您可以通过打开 Dev Console 刷新网页缓存 (Ctrl+Shift +I ),right-click
-点击刷新页面箭头(开发控制台打开时)并选择清空缓存和硬重新加载。即清空缓存。
您也可以禁用它,如上所示,方法是打开 Dev Console,转到 Network 选项卡并选中其下方的 "Disable Cache" 复选框。请注意,缓存 仅在您的开发者控制台打开时被禁用。
对此有多种解决方案。我将在下面列出我的一些选项。
文件的唯一标识符通过参数
在文件后面添加一个参数作为一种版本号可能会有所帮助。
在 php 中,您可以使用 time()
获取当前时间戳或使用 unique()
获取唯一字符串。
缓存设置服务器端
您还可以找到一些 .htaccess
设置,用于在服务器端缓存特定文件类型。出于性能原因,您也应该在生产环境中这样做。
浏览器开发工具
另一种方法是在开发时打开浏览器开发工具 (mostly F12)
。大多数浏览器如 Chrome 和 FF 在您的浏览器开发工具打开时提供无缓存环境。作为 chrome 中的示例,您可以显式禁用缓存。
我的建议
或者甚至更好地使用 Task Runner 来完成此任务。要搜索的关键字是'cache bust'。例如,您可以 运行 gulp
进行连接、版本控制,并让它连接您想要的正确 css 文件。这是开发阶段特别建议的。
问候 吉奥馆