218

I am converting one layout to html; once I make the changes in code/html/css, every time I have to hit F5. Is there any simple javascript/jQuery solution for this? I.e. after I add the script, reload the whole page every 5 seconds (or some other specific time).

11 Answers 11

457
 <meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/yoursite.html">

If it has to be in the script use setTimeout like:

setTimeout(function(){
   window.location.reload(1);
}, 5000);
4
  • 4
    I think this is probably a better way of doing it than in javascript.
    – Rich
    May 7, 2010 at 10:07
  • 1
    If the use case was that the page needed to refresh for visitors then I might agree, but for development purposes, having a block of code that you can drop into the page without having to update a URI each time is an advantage. Depending on JS isn't a problem when the developer is the entire target audience.
    – Quentin
    May 7, 2010 at 10:11
  • 4
    location.reload(1) will repeat a POST if the current page is the result of a POST. That might not be desirable, if you are looking to replicate the meta refresh in Javascript.
    – Reuben
    Oct 8, 2015 at 6:38
  • 7
    Reloading the current page doesn't require you to specify the page, Just: <meta http-equiv="refresh" content="5">
    – ashleedawg
    Feb 5, 2019 at 21:09
178

To reload the same page you don't need the 2nd argument. You can just use:

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

This triggers a reload every 30 seconds.

3
  • 3
    It is discouraged when used for redirect. It is not deprecated. (And it comes in very handy when you want to refresh a page and are too lazy to learn ajax :) Apr 1, 2017 at 18:40
  • This isn't working for me. Tried adding this line to this codepen to no avail. codepen.io/css-support/pen/bspdK Aug 11, 2018 at 18:11
  • 1
    @lololololol You have to add it in the "Stuff for <head>" setting in the HTML's Pen Settings area. It doesn't work if you put it in the actual script.
    – Bret
    Aug 21, 2019 at 18:09
28

For auto reload and clear cache after 3 second you can do it easily using javascript setInterval function. Here is simple code

$(document).ready(function() {
  setInterval(function() {
    cache_clear()
  }, 3000);
});

function cache_clear() {
  window.location.reload(true);
  // window.location.reload(); use this if you do not remove cache
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Auto reload page and clear cache</p>

and you can also use meta for this

<meta http-equiv="Refresh" content="5">
2
  • Page refresh <script> is working but can you explain how it is clearing the cache?? or it is jus refreshing the cache.. pls explain.
    – Silver
    Nov 18, 2016 at 5:18
  • stackoverflow.com/questions/5721704/…, if you want to lean more then please google it Nov 18, 2016 at 8:38
18
setTimeout(function () { location.reload(1); }, 5000);

But as development tools go, you are probably better off with a tab reloading extension.

11

There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free.

You choose a URL that you'd like to auto-reload, and specify one or more directory paths to monitor for changes. Press F12 to start monitoring.

enter image description here

After you set it, minimize it. Then edit your content files. When you save any change, the page gets reloaded. like this:

enter image description here

Simple. easy.

2
  • 2
    Nice tool for IE, and thanks for animated thing. How can I create the same? Sep 13, 2011 at 11:03
  • @WasimShaikh - Record your screen to an animated GIF using ScreenToGIF.
    – ashleedawg
    Feb 5, 2019 at 21:07
8

Answer provided by @jAndy should work but in Firefox you may face problem, window.location.reload(1); might not work, that's my personal experience.

So i would like to suggest:

setTimeout(function() { window.location=window.location;},5000);

This is tested and works fine.

3

A decent alternative if you're using firefox is the XRefresh plugin. It will reload your page everytime it detect the file has been modified. So rather than just refreshing every 5 seconds, it will just refresh when you hit save in your HTML editor.

3

Alternatively there's the application called LiveReload...

3

This will work on 5 sec.

5000 milliseconds = 5 seconds

Use this with target _self or what ever you want and what ever page you want including itself:

<script type="text/javascript">
function load()
{
setTimeout("window.open('http://YourPage.com', '_self');", 5000);
}
</script>
<body onload="load()"> 

Or this with automatic self and no target code with what ever page you want, including itself:

<script type="text/javascript">
function load()
{
setTimeout("location.href = 'http://YourPage.com';", 5000);
}
</script>
<body onload="load()"> 

Or this if it is the same page to reload itself only and targeted tow hat ever you want:

<script type="text/javascript">
function load()
{
setTimeout("window.open(self.location, '_self');", 5000);
}
</script>
<body onload="load()">

All 3 do similar things, just in different ways.

2

If you are developing and testing in Firefox, there's a plug-in called "ReloadEvery" is available, which allows you to reload the page at the specified intervals.

0
2

function reload() {
  document.location.reload();
}

setTimeout(reload, 5000);

Not the answer you're looking for? Browse other questions tagged or ask your own question.