javascripthtmlrefreshreloadpartial-page-refresh

Check for newer version of page, and if existing, reload


Basically, I want my page (say page.html) to check if a newer version of page.html exists, and if so, refresh the page, and in doing so, bring up the newer version.

I realize this happens automatically after some time- however, I want this to happen within the time of 30 seconds to 2 minutes.

I'm not sure how this would be accomplished- perhaps some Javascript?

if(/*newer version exists*/) {
location.reload();
}

The part I'm unsure about is how to detect if a newer version exists.

I had an idea for a workaround- have a function that checks if some sort of "signal" has been sent (I'd send it right after modifying a page), and once the "signal" is received, refresh the page.

So far, the only thing I've found is meta refresh. I didn't think of using it before- however, it looks like I might have to.

<META HTTP-EQUIV="refresh" CONTENT="60">

The only issue I have with meta refresh is that it refreshes every minute whether I have a new version of the page or not, which can get very annoying- especially because I have images on the page.

Is it possible to specifically target an element for a meta refresh? (The element being referred to would be a Javascript segment which I frequently modify, and which needs to be up to date)

Update 1 Partial Script: Reloads main.js when the button is pressed. With a few tweaks, I can reload the script every minute or so.

Sandbox

    <button id="refreshButton" onclick="loadScript('/main.js')">
        Refresh script
    </button>


    <script>
        function loadScript(location) {
            var js = document.getElementById("sandboxScript");
            if(js !== null) {
                document.body.removeChild(js);
                console.info("---------- Script refreshed ----------");
            }

            // Create new script element and load a script into it
            js = document.createElement("script");
            js.src = location;
            js.id = "sandboxScript";
            document.body.appendChild(js);
        }
    </script>

Solution

  • In the end, I found a simpler solution than simply reloading the page.

    I linked to some external script (which, in effect, was the only thing I needed reloaded)

    I then wrote a little function (I added it to the question), and re-fetched the external script every 10 minutes. Works like a charm, and better yet, isn't visible onscreen, so it doesn't disrupt the user one bit!