在继续 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
    });
});

我已经厌倦了将代码的第 2 部分放在里面：

setTimeout(function() {
}, 5000);

和

window.onload = function(){
};

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

Answer 1

当您使用 location.href 更改页面时，您的 JS 会重新加载。所以你需要一种方法来存储页面更改之间的数据。我建议使用 LocalStorage 您的代码如下所示：

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

请注意，您必须做一些 serialize/deserialize 的事情，因为 localStorage 只保存字符串 另外如@charlietfl 所述，如果您有不同的域，则会造成额外的困难