javascript - 我应该为此 Tampermonkey 脚本选择哪个元素？或者可以等到所有内容加载结束吗？

Question

我编写了这个简单的代码来单击多个下载链接中的第一个下载链接。
问题是我必须等待下载链接出现(有一些转换过程)。我做了一个测试，它们的出现比 Load 或 DOMContentLoaded 晚得多。 (顺便说一句，有什么方法可以描述像这种情况这样的一切加载的真正结束吗？)

这是一个示例链接:
https://www.saveoffline.com/#https://www.youtube.com/watch?v=vEROU2XtPR8

无论如何，首先我编写了一个代码，等待 30 秒，然后为我点击链接，它有效，我得到了正确的目标链接! 但互联网连接速度各不相同，30 秒并不完美，所以现在我想要一个代码在链接显示时自动单击该下载链接。代码如下:

// ==UserScript==
// @name        saveoffline click first format
// @include     https://www.saveoffline.com/*
// @grant       none

var x = 0
function waitforgrab() {
    // 1200 = 10min/500ms of waiting
    if(x>1200) stopthere();//use a wrong function to stop this js.
    if(document.getElementById("output")===null) {//I have to pick the correct element to describe download links showing up.
        x = x+1
        setTimeout(waitforgrab(), 500)
    }
}
waitforgrab();
// the above lines : wait until download links show up.

// the following line: click first link. This line proves correct.
document.getElementById("media-formats").firstElementChild.click();

测试结果:

ERROR: Execution of script 'saveoffline click first format' failed! Cannot read property 'click' of null...

所以，我选择了错误的元素？ - 虽然这个元素不为空，但这并不意味着显示下载链接？但我尝试了 4、5 个元素，就是不正确。

请帮我找到这个“正确”的元素。或者，也许如何描述所有内容的真正负载结束，然后我只需单击目标下载链接即可。

Answer 1

1. 不要重新发明轮子。正如您所发现的，尝试猜测网络上的加载延迟是一种非常脆弱的方法。
   使用诸如 waitForKeyElements 或 MutationObserver 之类的东西。
2. document.getElementById("media-formats") 立即触发，而不是在 setTimeout 之后触发。
3. 该代码还存在其他几个问题，请将其替换为如下所示的代码。
4. 在 AJAX 驱动的页面上，很少有一种方法可以“描述所有内容加载的真正结束”。如果有的话，它也是高度特定于页面的——所以不值得依赖。

无论如何，既然您链接了目标页面，正确的选择器就会显示在这个完整的 Tampermonkey 脚本中:

// ==UserScript==
// @name     Saveoffline, click the first download format
// @match    https://www.saveoffline.com/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.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 ("#media-formats > a > .formatButton", clickNode, true);

function clickNode (jNode) {
    //- The buttons are loaded in reverse order, so ensure we have the first child.
    var frstNode   = jNode.parent ().siblings ().first ().children (".formatButton");
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    frstNode[0].dispatchEvent (clickEvent);
}