javascript - 一旦设置了 anchor 标记，在延迟后如何单击 anchor 标记？

Question

有一个页面，其 anchor 标记在延迟后变得可点击。我想使用用户脚本在可点击后点击它。

页面加载时，HTML 源代码为:

<div id="buton" style="display:none">
  <div class="info-link right">
    <a href="#">Download</a>
  </div>
</div>

延迟一段时间后，#button 变得可见，并且 HTML 变为:

<div id="buton" style="">
  <div class="info-link right">
    <a href="http://178.32.87.115/jetapi/mali.php?go=aHR0cHM6Ly9vdXJsLmlvLzZpN0Mw" data-ss1536034362="1">Download</a>
  </div>
</div>

我尝试使用此代码来单击它 in JSFiddle ，并且运行成功:

document.querySelector('.info-link.right a').click()

但是，当我在实际的 website here 上尝试时(使用tampermonkey)，什么也没有发生。我该怎么办？

Answer 1

您需要等到元素的 href在单击之前会被重新分配。幸运的是，您的相关网站是静态的，并且 <a>位于页面加载时的 HTML 中，因此可以立即选择它 - 然后，您可以使用 MutationObserver 观察它这样一旦它 href改变了，你可以click()就在上面。

// ==UserScript==
// @name         clickit
// @namespace    CertainPerformance
// @version      1
// @match        http://178.32.87.115/jetapi/?file=28941536032773
// @grant        none
// ==/UserScript==

const a = document.querySelector('.info-link > a');

const observer = new MutationObserver(() => {
  a.click();
});
observer.observe(a, { attributes: true });

请注意，如果网站不是静态的，并且 <a>页面加载时不存在，您必须执行其他操作，也许使用 setInterval并不断检查页面是否有 a谁的href符合你想要的:

setInterval(() => {
  const a = document.querySelector('a[href^="http://178.32.87.115/jetapi/mali.php?go="]');
  if (a) a.click();
}, 50);