Treehouse

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>
ydkjs-4.png

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

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 ?

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