我应该为这个Tampermonkey脚本选择哪个元素?或者它可以等到所有东西装载结束吗

Question

我组装了这个简单的代码来点击几个下载链接中的第一个下载链接
问题是，我将不得不等待下载链接出现(有一些转换过程)。我做了一个测试，它们显示得比Load或DOMContentLoaded晚得多。(顺便说一句，有什么方法可以描述这种情况下所有东西的真正装载结束吗？)

下面是一个示例链接：
/emsp 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();

测试结果：

错误：执行脚本"saveoffline click first format"失败！无法读取null的属性"click"。。。

所以，我选错了元素？-虽然这个元素不是null，但这并不意味着下载链接会出现吗？但我尝试了4或5个元素，就是不对。

请帮我找到这个"正确"的元素。或者，也许如何描述EVERYTHING的真正负载结束，然后我可以简单地点击目标下载链接。

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