Question

我正在编写Tampermonkey脚本，并为hashchange设置了一个侦听器。
在该侦听器内部，我调用了一个操作DOM的函数。问题在于该函数在页面完全加载之前被调用。

从一个部分切换到另一部分时，页面无法完全重新加载，因此on load只能工作一次，这就是为什么我在听hashchange而不是load的原因。

window.addEventListener('hashchange', function (e) {
    if (!/step=view&ID=/.test(location.hash)) {
        //TODO clean up if leaving active trade
        return
    }
    console.log('hash changed', e)
    setup()
});

function setup() {
    //wait for page load here
    $('.myclass').after(<span>foo</span>);
}

我尝试在安装程序中添加on load，但没有执行任何操作。

编辑：

在load之外为setup添加一个侦听器，如果要转到确切的链接，也只能工作一次，因此也不是选择。

Answer 1

这是waitForKeyElements，MutationObserver或setTimeout的工作

在几乎所有此类页面上，使用waitForKeyElements本身就足够了，不需要hashchange侦听器：

// ==UserScript==
// @name     _spans of foo
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */

waitForKeyElements (".myclass", setupMyClass);

function setupMyClass (jNode) {
    jNode.after ('<span>foo</span>');
}

由于您添加的<span>foo</span>显然在哈希更改后仍未保留，因此此技术可能就是您所需要的。

但是，如果该页面是重用.myclass节点的页面 ^{（¿却以某种方式破坏了您的范围？）}，而不是重新创建它们，则使用this other answer中显示的技术。

在这种情况下，MutationObserver 可能是更好的选择。但是，这取决于您的问题中未提供的详细信息。

另请参阅How do I reload a Greasemonkey script when AJAX changes the URL without reloading the page?。

hashchange事件后，如何使Tampermonkey脚本等待页面完成？

1 个答案: