How do I refresh the browser every X seconds with javascript?

Question

I use a Firefox plugin that can refresh the browser window every X seconds. As a frontend developer this is really useful as I can get instant feedback on CSS / XHTML change

Answer 1

The easiest and hackiest solution to refreshing the page is to add this inside the head:

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

to refresh it every 30 seconds.

You can do similar with Javascript by doing:

setTimeout('window.location.href=window.location.href;', 30000);

Note: There are several methods of reloading the page in Javascript so these will also work:

setTimeout('window.location.reload();', 30000);

and

setTimeout('history.go(0);', 30000);

and others.

Both of these will completely reload the page every 30 seconds. That's fine if all you're doing is something quick and dirty. Generally though for something users will use, you'll want to do AJAX refreshes to parts of the page instead. For example:

setInterval(refresh_table, 30000);

function refresh_table() {
  $("#table_container").load("/load_table");
}

Answer 2

This meta tag does the magic too. It refreshes the page after every 30 seconds and you can change it too.

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

Answer 3

setTimeout("location.reload(true);", timeoutPeriod);