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

4
我想做的是一旦FireFox页面重新加载/刷新,就从扩展程序/GM脚本触发一个函数...
想象一下:
1.我进入一个要求输入用户名和密码的网页。 2.我的代码填充这些值并提交凭据。 3.网页重新加载并显示一个要求我输入预先决定的数字的页面。 4.我输入数字。 5.网页重新加载并显示一个要求我从下拉菜单中选择选项的页面。 6.我选择... ...你明白了吧。
我想编写一些JavaScript来完成所有这些操作。由于需要持久性,并且我没有更改源站点的能力,所以我想编写一个FireFox扩展或GreaseMonkey - 基本上是客户端的任何东西。
类似DOMContentReloaded事件将会执行以下内容(如果存在):
addEventListener("DOMContentReloaded", pageReloaded, false);
此类代码的典型测试用例包括:
1.查找页面刷新之间花费的时间。 2.等待第二次页面刷新发生,然后重定向到另一个页面等等。
所有这些都将通过FireFox扩展(或GreaseMonkey,如果GM中的解决方案更容易/更好/更推荐)完成 - 鉴于此,事情应该很容易?
5个回答

6

我已经更新了我的答案,以反映您下面更新的问题。

正如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之外的任何浏览器(除非您更正事件处理程序以使其与IE兼容)。我不知道如何使用Firefox扩展程序来实现这一点,尽管可能有一种更好的方法可以使用扩展程序。
更新:
现在我更好地理解了您想要做什么,以下是一些可能有用的信息:
我上面包含的脚本(显然)是专门用于跟踪刷新的。但是,它也可以用于跟踪导航。在检查“if(timestamp > temp)”的条件中,您可以调用另一个函数来执行某些操作(仅在页面刷新时执行该操作等)。如果您需要持久数据,只需将其存储在cookie中,就像我上面所做的那样。如果您不需要保留页面计数,则可以在该cookie中存储其他信息。
我以前从未创建过油猴脚本,但我认为它可以引用DOM中的元素,也可以引用文档的cookie。通过使用上面提供的代码,您可以使用油猴存储站点的持久数据。如果无法访问DOM cookie,则可以使用 greasemonkey 的 GM_setValue() GM_getValue()函数来存储持久数据。据我所知,这些数据将在浏览器会话中保存。您需要放置一些标志值,以确保它仅在页面加载时起作用(类似于我上面使用的时间戳示例)。
至于jQuery,它是用于JavaScript的API。我不知道它对油猴脚本有多大帮助,尽管我认为如果您在脚本中使用它,它应该能够发挥作用。如果您想开始使用jQuery,请查看它们的文档。它真的做得很好。我的示例中唯一真正可以有效使用jQuery的部分是事件处理部分。以下是如何在jQuery中处理事件的方法:
$().ready(pageOpened);
$().unload(pageClosed);

使用上述两行代码替换 'window.addEventListener()' 调用,即可实现跨浏览器。然而,由于您正在使用 greasemonkey 脚本,除非您需要进行 DOM 操作,否则 jQuery API 是不必要的,而 jQuery 在这方面非常擅长。

+1 很好的回答 - 我没有测试过Javascript,但“PoorLuzer”(提问者)真的必须欣赏您在这个问题上所做的工作。 - Mark Brittingham
哇,丹,跟踪点击次数的代码非常酷!然而,这只是我想做的功能之一,而不是目标本身... 而且它假设我编写了所有这些发生的站点的 HTML。关于你的 jQuesry 建议... 你能指点我从哪里开始吗? - PoorLuzer
你重新定义了一个“reload”问题为一个“load”解决方案,真的很棒 - 最终结果相同,尽管后者需要使用 cookies。但是没有办法实现一些“OnReload”功能吗?甚至可以使用 JavaScript 库吗? - PoorLuzer
可能你能得到的唯一“OnReload”功能就是我在我的答案中定义的。我认为没有任何关于刷新的东西存在,因为Web的一般哲学是“无状态”,因此对刷新一无所知。 - Dan Herbert
我终于开始实现这个问题的解决方案了,你的想法只需要在这里做一些代码修改就可以帮助我。如果我有时间,我会发布我的解决方案。 - PoorLuzer
显示剩余2条评论

0

我认为没有办法通过在浏览器中刷新页面来保留您的JavaScript代码 - 因为它会重新加载所有内容...

也许您可以从window.onbeforeunload开始,重载默认重新加载按钮功能,并使用AJAX重新加载一些主要的div...


正确..但这就是为什么我在第一行加了括号中的文本!持久性是通过一个始终存在的FireFox扩展实现的。基本上,我想问的是,是否可能让扩展在FireFox中找到/通知页面何时重新加载。 - PoorLuzer

0

如果不是在关闭页面时也触发,分配window.onbeforeunload将是可行的解决方案!

还有更多建议吗?也许是FF扩展或GM脚本特定的?


0

使用 window.namedocument.cookie - 这两个属性都可以在页面刷新后保留。


-1

919756 如果你成功了,TC工作人员会抓住并封禁你。不知道我怎么知道的?嗯嗯嗯...


2
仍然无法弄清楚这是什么意思! - PoorLuzer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接