JavaScript中的页面重新加载/刷新操作

我想要做的是在FireFox中的页面重新加载/刷新后从扩展/ GM脚本触发一个函数...

想象一下:

我转到一个要求输入用户名和密码的网页.

我的代码填充这些值并提交凭据

网页重新加载并打开一个页面,要求我输入预先确定的号码

我输入号码

网页重新加载并打开一个页面,要求我从下拉列表中选择一个选项

我选择......你明白了......

我想我想编写一些JavaScript来完成所有这些...并且由于需要持久化并且我没有能力更改源站点,我想到编写FireFox扩展或GreaseMonkey - 基本上是客户端的任何东西.

像DOMContentReloaded这样的事件就像是(就已存在):

addEventListener("DOMContentReloaded",pageReloaded,false);

此类代码的典型测试用例是:

了解页面刷新之间需要多长时间

等待页面刷新的第二个实例发生,然后重定向到另一个页面等.

所有这些都可以通过FireFox扩展(或GreaseMonkey,如果GM中的洗脱更容易/更好/推荐)来完成 - 考虑到这一点,事情应该很容易吗？

我已更新我的回答,以反映下面的更新问题.

正如rjk所提到的,您可以使用该onbeforeunload事件在页面刷新时执行操作.

这是一个解决方案,应该解决我将在下面解释的一些潜在问题:

// 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());
}

这样做是在页面卸载时创建一个临时cookie.cookie存储当前时间的时间戳.加载页面时,将读取该cookie,并检查时间戳以查看它的年龄.如果它在30秒内,它将增加计数器.

我选择了30秒,因为我不知道您的网站数据密集程度或加载时间.如果您的网站速度很快,我会将其更改为5-10秒,以便脚本更准确.要做到这一点,将秒数更改为50-55秒,您将分别获得10秒或5秒的窗口.

这只会在浏览器保持打开状态时跟踪重新加载.一旦关闭,计数就会丢失.您可以通过向' count'cookie 添加到期来更改它.

因为时间戳cookie仅在浏览器打开时维护,所以此脚本相当值得信赖,因为它不会计算关闭并重新打开浏览器.唯一可能出现问题的情况是用户是否打开了选项卡,然后关闭选项卡并在指定的时间窗口内重新打开它.

所有这一切都是在没有firefox扩展的情况下完成的,并且可以在除IE之外的任何浏览器上工作(除非你纠正事件处理程序以使用它).我不知道如何使用firefox扩展来实现这一点,尽管可能有更好的方法使用扩展.

UPDATE

既然我明白你想要做得更好一点,这里有一些可能有用的东西:

我上面包含的脚本(显然)专门用于跟踪刷新.但是,它也可以用于跟踪导航.在检查' if (timestamp > temp)'你可以调用另一个将执行某些操作的函数的情况下(该操作将仅在刷新页面时执行,等等).如果你想要持久数据,你只需要将它存储在cookie中,就像我上面那样.如果您不需要保留页数,则可以在该cookie中存储其他一些信息.

我以前从未创建过greasemonkey脚本,但我假设因为它可以引用DOM中的元素,所以它也可以引用文档的cookie.这将允许您使用greasemonkey存储站点的持久数据,只需使用上面包含的代码即可.如果您无法访问DOM cookie,可以使用greasemonkey GM_setValue()和GM_getValue()函数来存储持久数据.据我所知,这些数据将存储在浏览器会话中.你必须放入一些标记值,以确保它只适用于页面加载(类似于我上面使用的时间戳示例).

至于jQuery,这是一般用于JavaScript的JavaScript API.我不知道它对GreaseMonkey脚本有多大用处,虽然我认为如果你在脚本中使用它会有用.如果您想开始使用jQuery,请查看他们的文档.它做得非常好.我的示例中唯一可以有效使用jQuery的部分是事件处理部分.以下是如何在jQuery中执行事件处理:

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

用window.addEventListener()上面的那两行替换' '调用,你有一个跨浏览器实现.因为你正在使用greasemonkey脚本,所以jQuery API变得不必要了,除非你想做DOM操作,jQuery非常擅长.