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

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，但没有任何效果。

编辑：

在 setup 之外为 load 添加一个侦听器，如果要精确到 link，也只会工作一次，所以这也不是一个选项。

Answer 1

这是 waitForKeyElements 或 MutationObserver 或 setTimeout

的工作

在几乎所有此类页面上，waitForKeyElements 本身就足够了，不需要 hashchangelistener:

// ==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>s 在 hashchange 之后显然不会持续存在，那么您可能只需要这种技术。

但是，如果该页面 重用 .myclass 节点 ^{（¿但不知何故破坏了你的跨度？）}而不是重新创建它们，然后使用 .

中所示的技术

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

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

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

How to get a Tampermonkey script to wait for page to finish after a hashchange event?

javascript

jquery

greasemonkey

userscripts

tampermonkey