我应该为这个 Tampermonkey 脚本选择哪个元素？还是可以等到所有内容加载结束？

Question

我组装了这个简单的代码来点击第一个下载 link 几个下载 links.
问题是我必须等待下载 links 出现（有一些转换过程）。我做了一个测试，它们出现的时间比 Load 或 DOMContentLoaded 晚得多。（顺便说一句，有没有什么办法可以描述像这种情况的真正加载结束？）

这是一个例子link:
https://www.saveoffline.com/#https://www.youtube.com/watch?v=vEROU2XtPR8

无论如何，首先我组装了一个等待 30 秒的代码，然后为我单击 link，它起作用了，我得到了正确的目标 link！但是互联网连接速度各不相同，30 秒并不完美，所以现在我想要一个代码来在 link 出现时自动点击下载 link。这是代码：

// ==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...

这么说，我选错元素了？ - 虽然这个元素不为空，但并不意味着下载 links 出现了？但是我试了4、5个元素，就是不对。

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

Answer 1

不要重新发明轮子。正如您所发现的，试图在网络上猜测加载延迟是一种非常脆弱的方法。
使用类似 waitForKeyElements 或 MutationObserver.
document.getElementById("media-formats") 立即触发，而不是在 setTimeout 之后触发。
该代码还有其他几个问题，请将其替换为如下所示的内容。
在 AJAX 驱动的页面上，很少有 "describe the real end of loading of everything" 的方法。如果有，它是高度特定于页面的——所以不能依赖。

无论如何，由于您链接了目标页面，正确的选择器显示在这个 完整的工作 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);
}

我应该为这个 Tampermonkey 脚本选择哪个元素？还是可以等到所有内容加载结束？

Which element should I choose for this Tampermonkey script? Or can it wait to the end of loading of everything?

javascript

tampermonkey