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

Question

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

想象一下:

1. 我转到一个要求输入用户名和密码的网页。
2. 我的代码填充这些值并提交凭据
3. 网页重新加载并打开一个页面，要求我输入预先确定的号码
4. 我输入号码
5. 网页重新加载并打开一个页面，要求我从下拉列表中选择一个选项
6. 我选择... .. 你明白了..

我想我想写一些 JavaScript 来做这一切.. 因为需要持久性而且我没有能力改变源站点，我想写一个 FireFox 扩展或 GreaseMonkey - 基本上客户端的任何内容。

类似事件 DOMContentReloaded 的行为(如果它存在的话):

addEventListener("DOMContentReloaded", pageReloaded, false);

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

1. 找出页面刷新之间花费的时间
2. 等待页面刷新的第二个实例发生，然后重定向到另一个页面 ，ETC ..

所有这些都将通过 FireFox 扩展(或 GreaseMonkey，以防 GM 中的解决方案更容易/更好/推荐)完成 - 鉴于此，事情应该很容易？

Answer 1

我更新了我的答案以反射(reflect)您在下方更新的问题。

作为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 扩展来执行此操作，尽管使用扩展可能有更好的方法。

更新

现在我明白了你想要做得更好一些，这里有一些可能会有帮助的事情:

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

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

至于jQuery，它是一种javascript API，一般用于JavaScript。我不知道它对 GreaseMonkey 脚本有多大用处，尽管我认为如果您在脚本中使用它会起作用。如果您想开始使用 jQuery，请查看 their documentation .真的做得很好。我的示例中唯一真正可以有效使用 jQuery 的部分是事件处理部分。以下是您将如何在 jQuery 中进行事件处理:

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

将“window.addEventListener()”调用替换为上面的两行代码，您就获得了跨浏览器实现。但是，由于您使用的是 greasemonkey 脚本，除非您想进行 DOM 操作，否则 jQuery API 变得不必要，而 jQuery 非常擅长此操作。