Actions on page reload/refresh in JavaScript

Question

What I want to do is trigger a function from an extension/GM Script once a page in FireFox reloads/refreshes...

Picture this:

1. I goto a webpage that asks for a username and password.
2. My code populates these values and submits the credentials
3. The webpage reloads and brings up a page asking me to enter a pre-decided number
4. I enter the number
5. The webpage reloads and brings up a page asking me to select an option from a dropdown
6. I select ... .. you get the idea..

I figured I wanted to write some JavaScript to do all this.. and since persistence would be required and I don't have capability to change the source site, I thought of writing a FireFox extension or GreaseMonkey - basically anything on the client side.

Something like that the event DOMContentReloaded would have acted like (had it existed) :

addEventListener("DOMContentReloaded", pageReloaded, false);

Typical test cases for such code would be to:

1. Find out how much time it took between page refreshes
2. Wait for the second instance of page refresh to happen and then redirect to another page ,etc ..

All this would be done from a FireFox extension (or GreaseMonkey in case a slution in GM would be easier/better/recommended) - given this, things should be easy?

Answer 1

919756 If you succeed, TC staff will catch and ban you. Wonder how I knew? hmmmmm...

Answer 2

I've updated my answer to reflect your updated question below.

As rjk mentioned, you can use the onbeforeunload event to perform an action when the page refreshes.

Here is a solution that should work with some potential issues I'll explain below:

// Just some cookie utils from: http://www.quirksmode.org/js/cookies.html
var Cookie = { 
    create: function(name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    },

    read: function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1, c.length);
            }
            if (c.indexOf(nameEQ) == 0) {
                return c.substring(nameEQ.length, c.length);
            }
        }
        return null;
    },

    erase: function(name) {
        createCookie(name, "", -1);
    }
}

window.addEventListener('beforeunload', pageClosed, false);
window.addEventListener('load', pageOpened, false);

function pageOpened() {
    var timestampString = Cookie.read('closeTester');
    if (timestampString) {
        var timestamp = new Date(timestampString);
        var temp = new Date();
        temp.setMinutes(temp.getMinutes() - 1, temp.getSeconds() - 30);
        
        // If this is true, the load is a re-load/refresh
        if (timestamp > temp) {
            var counter = Cookie.read('counter');
            if (counter) {
                counter++;
                Cookie.create('counter', counter);
            } else {
                Cookie.create('counter', 1);
            }
        }
        Cookie.erase('closeTester');
    }
}

function pageClosed() {
    Cookie.create('closeTester', new Date());
}

What this does is create a temporary cookie when the page unloads. The cookie stores a timestamp of the current time. When the page is loaded, that cookie is read, and the timestamp checked to see how old it is. If it is within 30 seconds, it will increment the counter.

I chose 30 seconds because I don't know how data intensive your site is or how long it takes to load. If your site is speedy, I'd change it to 5-10 seconds so that the script is more accurate. To do that, change the number of seconds to 50-55 seconds and you will get a 10 second or a 5 second window respectively.

This will only keep track of the reloads while the browser is kept open. Once it is closed, the count is lost. You can change that by adding an expiration to the 'count' cookie.

Because the timestamp cookie is only maintained while the browser is open, this script is fairly trustworthy since it won't count closing and reopening the browser. The only case where you could have problems is if the user has a tab open, and then closes the tab and re-opens it within the window of time you specify.

All of this is done without a firefox extension and will work on any browser except IE (unless you correct the event hander to work with it). I don't know how to do this using a firefox extension, although it's possible there may be a better way using an extension.

UPDATE

Now that I understand what you're trying to do a little better, here are a few things that may be helpful:

The script I've included above (obviously) is specifically for tracking refreshes. However, it can also be used to just track navigation also. In the condition that checks 'if (timestamp > temp)' you can call another function that will perform some action (the action will only be performed when the page is refreshed, etc). If you want persistent data, you just need to store it in a cookie, like I do above. If you don't need to keep a count of the pages you can store some other info in that cookie.

I've never created a greasemonkey script before, but I'm assuming that since it can reference elements in the DOM, it can also reference the document's cookies. This would allow you to store persistent data for the site using greasemonkey by just using the code I've included above. If you can't access the DOM cookie, you can use greasemonkey's GM_setValue() and GM_getValue() functions to store persistent data. This data will be stored across browser session though as far as I know. You'll have to put some sentinel values in to ensure that it only works across page loads (something like the timestamp example I used above).

As for jQuery, that is a javascript API that is used for JavaScript in general. I don't know how useful it is for GreaseMonkey scripts, although I'd assume it would work if you used it in a script. If you want to get started with jQuery, check out their documentation. It's really well done. The only part of my example that really can use jQuery effectively is the event handling parts. Here is how you'd do the event handling in jQuery:

$().ready(pageOpened);
$().unload(pageClosed);

Replace the 'window.addEventListener()' calls with those 2 lines above and you've got a cross browser implementation. Since you're using a greasemonkey script however, the jQuery API becomes unnecessary unless you want to do DOM manipulation, which jQuery is very good at.

Answer 3

Use window.name or document.cookie - both properties will survive a refresh of the page.

Answer 4

Assigning window.onbeforeunload would be a workable solution had it not fired when the page is closed too!

Any more suggestions .. maybe FF Extension or GM Script specific?

Answer 5

I do not think there is any way of preserving you JavaScript through refreshing the page in browser - it then loads it all again...

Maybe you can start with window.onbeforeunload to overload default function of reload button and use AJAX to reload some main div...