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

Question

What if my website was updated, i mean the CSS and some content, and after the update old visitors when comming back on my page the CSS is not auto refreshing, you have to manually refresh the page. Well, visitors are not experts and they will think first that the page is broken or smthing.

How to make a script with Javascript or PHP, any... so that when some one is accessing the page/website, i want the page to be refreshed be fore it will open to the visitor. It will be ok if it will do the job only on the index page.

Is it possible?

I found this script with google help, but its not working, nothing is happen!

<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

Your best bet is to "version" your css urls:

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

becomes

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

Any time you update the stylesheet just modify the URLs. You've tagged this question as PHP, so just store the version as a variable or constant in a universally includeed file and it will be really easy:

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

If you MUST do it in Javascript, you can have javascript load a new stylesheet that has a unique tag on it (a timestamp, for instance) into the head tag, but this will waste bandwidth and slow down the page load, as the user will end up downloading two stylesheets:

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);

You can also set short cache-expiration times either in the CSS headers (make your css files .php files that send css headers and also add an expires header:

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

Or in your webserver's configuration (in Apache, for instance) you can set default cache headers based on file type, so CSS could be set to have a rapid expiration period. However, once again, your application's performance will suffer slightly, as you're undermining some of the advantages of the user's browser cache.