Tuesday, March 19, 2024

How to Reload the Page

…use these to jump around or read it all

[Reload All By Itself]
[Reload From A User’s Click]
[Use the Full URL?]
I started to get email asking for this effect right around the time Internet stocks took off. People wrote asking how the stock sites got their pages to reload all by themselves.

The answer is pretty easy so I usually just wrote and answered in the email. While going through my notebook of possible topics, this one came up as one that is asked about a fair amount so I thought I’d write up a quick tutorial.

The trick to reloading the page is to force the browser to not look into the cache, but rather to again make a connection to the Web and bring up the document from the server. Most people know it can be done by hand by holding the shift key and clicking the “Refresh” (on IE) or “Reload” (on Navigator) buttons. If you didn’t know…now you do.

That’s a proven method but it’s not exactly very pretty to have text asking the user to hold and click. You want your site to do the trick either by itself, or by offering a method whereas the user simply clicks and the browser does it for them.

Below I have two methods. One will reload every so many second all on its own and the other will reload when the user asks for it.


Reload All By Itself

This one’s nice and easy. I’ll give you the code. Copy and paste it into the document you wish to reload. Once in there, change the number of seconds you wish the page to wait before starting the reloading process. This code goes in between the HEADtags.

<META HTTP-EQUIV=”refresh” CONTENT=”15″>
Right now, the command is set to reload every 15 seconds. I checked a couple of online sites and they were all set about the same. I found the sites displaying stock information were set to around five minutes or 300 seconds.

I don’t have a refresh on this page because the darn thing would just keep refreshing and there’s nothing on this page that will update.


Reload From A User’s Click

I’ve seen this done a number of ways, but this is my favorite because it, again, forces the browser to load from the server. It is true that pages can become cached if they are reloaded a great many times, but I have had pretty good success with this. Try it:

Click to refresh the page
Here’s the code:

<A HREF=”javascript:history.go(0)”>Click to refresh the page</A>
Rather than using a refresh command, I like to go to the history of the page and set it to zero. The zero is the current page since in JavaScript, lists (arrays) are numbered starting with zero. Here’s the same effect in a button:

 

 

And the code:

<FORM>
<INPUT TYPE=”button” onClick=”history.go(0)” VALUE=”Refresh”>
</FORM>


Use the Full URL?

Again, it’s possible that a page using the methods shown above can get cached and can stop reloading from the server. A Webmaster friend told me that if you simply set up a link to the current page but use the entire URL, the page would always reload from the server because the request starts at the domain. For example, the full URL of this page is:

http://www.htmlgoodies.com/tutors/refresh.html
If you use that full URL in each of the elements above, you’ll lessen the chance the page will cache. Thus, the Meta Refresh would become:

<META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.htmlgoodies.com/tutors/refresh.html”>

You would then change out the JavaScript formats above to simply go to the URL rather than looking at the history file. In fact, you could lose the JavaScript altogether and just make a simple A HREF link right to the current page. The trick is to use the full URL address so that the process starts at the very beginning.

Again, the effect is the same as you’ll get with the code above. It just lowers the chance of the page getting stuck in cache.


That’s That

Short, sweet and simple. The effect is useful if done correctly. Two methods of using the effect incorrectly are refreshing so that a counter increases and refreshing so that a new banner ad displays. You don’t want to refresh your page unless there’s a very good reason. There are programs out there that update banners without refreshing the entire page. The use of the refresh to display new counter numbers is just silly. If you find this tutorial too confusing, consider utilizing Bootstrap.

And yes, I have seen both usages or I wouldn’t have thought to bring them up.

Enjoy!

[Reload All By Itself]
[Reload From A User’s Click]
[Use the Full URL?]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured