Question

如果我的网站被更新了，我的意思是CSS和一些内容，在更新旧访问者回到我的页面后，CSS不会自动刷新，你必须手动刷新页面。好吧，访问者不是专家，他们会首先考虑页面被破坏或是什么。

如何使用Javascript或PHP制作脚本，任何...以便当某人访问页面/网站时，我希望页面能够刷新，因为它将向访问者开放。如果它只在索引页面上完成工作就没问题。

有可能吗？

我发现这个脚本有谷歌帮助，但它不起作用，没有任何事情发生！

<script type='text/javascript'>

(function()
{
  if( window.localStorage )
  {
    if( !localStorage.getItem( 'firstLoad' ) )
    {
      localStorage[ 'firstLoad' ] = true;
      window.location.reload();
    }  
    else
      localStorage.removeItem( 'firstLoad' );
  }
})();

</script>

Answer 1

你最好的选择是“修改”你的css网址：

<link type="text/css" rel="stylesheet" href="my_style_sheet.css" />

变为

<link type="text/css" rel="stylesheet" href="my_style_sheet.css?v=2.1" />

每次更新样式表时，只需修改URL即可。您已将此问题标记为PHP，因此只需将版本作为变量或常量存储在通用include ed文件中，这将非常简单：

<link type="text/css" rel="stylesheet" href="my_style_sheet.css?v=<?=CSS_VERSION;?>" />

如果您必须在Javascript中执行此操作，则可以让javascript在head标记中加载一个新的样式表，其中包含唯一标记（例如时间戳），但这会浪费带宽并减慢速度页面加载，因为用户将最终下载两个样式表：

var css_file=document.createElement("link");
css_file.setAttribute("rel", "stylesheet");
css_file.setAttribute("type", "text/css");
css_file.setAttribute("href", 'link_to_css.php?random_string='+escape(Math.random()));
document.getElementsByTagName("head")[0].appendChild(css_file);

您还可以在CSS标头中设置短缓存到期时间（制作发送css标头的css文件.php文件，并添加过期标头：

<?php header("Expires: [DATE IN PAST OR NEAR FUTURE]"); ?>

或者在您的网络服务器配置中（例如在Apache中），您可以set default cache headers based on file type，因此可以将CSS设置为具有快速过期时间。但是，再次，您的应用程序的性能将受到轻微影响，因为您正在破坏用户浏览器缓存的一些优势。

Answer 2

啊，你需要的是“Cache-Busting”。 Ben D描述的技术很好，但有点过于亲力亲为。试试这个：

<link type="text/css" rel="stylesheet"
    href="my_style_sheet.css?<?=filemtime('my_style_sheet.css')?>" />

您可以考虑其他一些事项，但这是最基本的自动缓存破坏技术。

注意，通过执行此操作，您可以将缓存超时设置为长时间，例如“1年”，因为每次文件更改时，文件的链接也会更改。

是否可以在加载之前刷新页面？

2 个答案: