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 changes the moment I save them in my editor.

I've noticed, however, that this often stops working. I'm guessing this may be due to javascript/jQuery that I've added to the page interfering with the plugin.

I was just wondering if it was possible to add a temporary line of javascript to mimic this auto-refresh behaviour when needed.

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

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