CODEWITHSUNDEEP
phpjavascriptjquery
user1978483
user1978483

Reputation: 89

Is it possible to refresh page before it gets loaded?

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>

Upvotes: 0

Views: 726

Answers (2)

Ben D
Ben D

Reputation: 14479

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.

Upvotes: 2

SEoF
SEoF

Reputation: 1114

Ah, what you need is called "Cache-Busting". The technique described by Ben D is fine, but a little too hands-on. Try this instead:

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

There are a few other things you can take into consideration, but this is the most basic, automatic cache-busting technique out there.

Note, by doing this, you can set the cache time-out to something long, like "1 year", because every time the file changes, the link to the file also changes.

Upvotes: 0

Related Questions