refresh detection algorithm not working

gib65 · 01-20-2012, 06:37 PM

Hello,

I'm trying to write some javascript that will detect if the page has been loaded because of the refresh button being pressed. I've searched google on how to do this, and several websites recommend something similar to the code I'm implementing below:

Code:

<script type="text/javascript" language="javascript">

// in head

    function checkRefresh() {

        alert("BEFORE: value = " + document.getElementById("visited").getAttribute("value"));

        if (document.getElementById("visited").getAttribute("value") == null ||
            document.getElementById("visited").getAttribute("value") == "")
        {
            document.getElementById("visited").setAttribute("value", "refreshed")
        }


        alert("AFTER: value = " + document.getElementById("visited").getAttribute("value"));
    }

</script>

...

<body onload="Javascript:checkRefresh();">

...

    <form id="hiddenform">
    <input type="hidden" id="visited" value="" />
    </form>

</body>

My variation differs from most of the examples on the internet in a few ways (which may or may not affect its functionality):

1) Most examples access the elements by directly using their names (as in: document.hiddenForm.visited.value). I'm using document.getElementById(...).getAttribute(...) just because that seems to be the safest way to ensure you are in fact getting the elements you want, and setAttribute(...) to ensure you're setting the attribute in the proper way. This entails that I need to set the ID in the form and input elements rather than the name.

2) I'm accessing the input tag directly (rather than going through the form) because I really don't see how this would make a difference.

3) I'm doing all this within asp:content tags which, from what I understand, can affect the behavior of the elements within it.

I'm not sure if this works out for other programmers, but for me it doesn't seem to be working. My alert messages in the checkRefresh function tell me that the value of the input element does indeed change as expected, but it seems to get wiped out and reinitialized to the original value of "" when the page is refreshed.

Am I doing something wrong?

Thanks for any help.

xelawho · 01-20-2012, 06:53 PM

this seems to do more what you are expecting:

Code:

<html>
<head>
<script type="text/javascript">
window.onload=checkRefresh;
    function checkRefresh() {
        alert("BEFORE: value = " + document.getElementById("visited").value);

        if (document.getElementById("visited").value == null ||
            document.getElementById("visited").value == "")
        {
            document.getElementById("visited").value="refreshed"
        }
        alert("AFTER: value = " + document.getElementById("visited").value);
    }

</script>
</head>
<body>
    <form id="hiddenform">
    <input type="hidden" id="visited" value="" />
    </form>
</body>
</html>

although a cache-clearing refresh (ctrl-F5 in most browsers) gives the same result as a first-view page

gib65 · 01-20-2012, 08:29 PM

Quote:

Originally Posted by xelawho

although a cache-clearing refresh (ctrl-F5 in most browsers) gives the same result as a first-view page

That may be it, but I still get the same result after turning caching back on (in the browser, in the ASPX page, and on the server).

Any other suggestions?

felgall · 01-20-2012, 10:13 PM

Refreshing a page doesn't actually reload the page and so does not trigger the onload handler again.

Reloading a page will clear any existing scripts and reload them so there'd be no way to assign a different value on reload to what was put there the first time (unless you use a cookie or localStorage/sessionStorage to keep track of the value between loads.

Not all currently popular browsers support getAttribute/setAttribute so accessing the attributes directly is currently the safest option.

gib65 · 01-20-2012, 11:14 PM

Thanks everyone but I'm handling this with C# codebehind.

felgall · 01-21-2012, 10:06 PM

Quote:

Originally Posted by gib65

Thanks everyone but I'm handling this with C# codebehind.

How do you plan on getting people to download that code and install it in their browser then? You can't use server side code to test for page refresh because the request never gets to the server - the page gets refreshed from the browser cache on the same computer as the browser is on.

That's probably why it isn't working - the browser refresh never sends anything to the server to run your code.

xelawho · 01-30-2012, 07:56 PM

I don't know anything about C# codebehind, but this seems to be a cookie-free way around the reload/refresh problem:

Code:

<html>
<head>
<title></title>
</head>
<script  type="text/javascript">
switch (window.location.hash){
case "#refresh":
alert("refreshed the page, didn't we?")
break;
default:
alert("first time, huh?")
window.location.hash = "#refresh"
break;
}
</script>
<body>
</body>
</html>