Automatically Refresh a Page Using JavaScript or Meta Tags

By  on  

I try to steer clear of modifying a page without the user triggering the change, much less automatically refresh or redirect a page. There are times when automatically refreshing the page is important, like when you pull up game play-by-play pages on NFL.com or ESPN.com. Whatever your reason for automatically refreshing the page, keep one thing in mind: auto-refresh only pages that have little interaction -- nothing more than a click.

The JavaScript Method

var timer = null;
function auto_reload()
{
	window.location = 'http://domain.com/page.php';
}
	
	 <body onload="timer = setTimeout('auto_reload()',10000);">

The META Tag Method

The following refreshes the page every 30 seconds.

<head>
<meta http-equiv="refresh" content="30" />
</head>

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

Discussion

  1. Ed Burrow

    I use a refresh feature in Firefox 3.0 (it’s an add-in) that allows me to set a refresh time for a page from 30 secs to unlimited minutes. I was wondering if you know of a program or add-in for IE7 (and now IE8) that would allow me to do same kind of thing.

    Thanks

    WldHogn

  2. vishal

    hi i am trying to reset counter after time interval and restart automatically. your code runs properly but it will post back if i want to avoid postback then what to do…
    thanku

  3. Mounica

    hi…..

    In my project the cascading style sheet is not working properly. So i thought of onload page refresh . So, can u please help me out with some code or any other stuff that gonna work properly please……….

    thank you…

  4. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

  5. Wow. Simple and works fine.

    Thanks a lot

  6. Nice and gud ……… ur code is working ……
    thanksssssss

  7. Could this script to change alexa rank ?

  8. Sachin

    How to reload page only one time on timer using jquery

  9. Eruanion

    Would this work to have the browser return to the home page? I need something that will time out and reset the broser back to homepage after a search or other actions on the system

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!