等待页面加载完成后再继续执行JavaScript代码

Question

我是JavaScript的新手，正在尝试让这个Tampermonkey脚本正常工作。当它从一个页面收集数据时，脚本可以正常工作。然而，现在我想让它像以前一样收集数据，但是在转到另一页后继续收集数据。

我的代码：

$(document).ready(function() {
    $("#getData").click(function() {
        // Part 1. Collect data and move on
        window.location.href = goToURL;
        // Part 2. Collect more data when the page has fully loaded
    });
});

我试图将代码的第二部分放在里面：

setTimeout(function() {
}, 5000);

并且。

window.onload = function(){
};

但是我无法让代码正常工作，它要么在页面加载之前执行，要么根本不执行。我错过了什么吗？

- Joshua

---

新页面意味着代码的新实例。存储在内存中的任何内容都会丢失。新页面是否在同一域上？ - charlietfl

即使通过Tampermonkey执行代码也是如此吗？ 是的，它在同一个域上。 - Joshua

是的...Tampermonkey在每次页面加载时都会运行新实例。@Vladimir建议使用localStorage是一个简单的方法。或者使用云存储。 - charlietfl

Answer 1

当你使用location.href改变页面时，你的JS会重新加载。因此你需要一种在页面切换时存储数据的方法。我建议使用本地存储。 你的代码应该像这样：

function storeState(state){
    localStorage.setItem('state', state);
}

function loadState(state){
    return localStorage.getItem('state');
}

$(document).ready(function() {
    var state = getState();
    $("#getData").click(function() {
        // Collect data and put it into state
        storeState(/* your collected state*/)
        window.location.href = goToURL;
    });
});

注意，由于localStorage只保存字符串，因此您需要进行一些序列化/反序列化操作。另外，如果您拥有不同的域名，将会导致额外的困难。

- Vladimir G.

---

应该将“第二部分”的注释移动，因为它不会在单击处理程序中。 - charlietfl