JavaScript 等待 Web 元素可见并单击它

Question

我正在尝试使用 JavaScript 自动化一些任务。正在生成网站，因此我无法使用 CSS 选择器，因为它们会随着每次网站刷新而变化。它没有在示例中显示，但可以使用它们的文本内容来操作按钮（遗憾的是，CSS 无法获得）。我已经想出了（感谢 StackOverflow）如何通过其 Xpath 单击 web 元素，但仍然不知道如何告诉 JS 等待它出现。单击元素的代码（工作）：var xPathRes = document.evaluate ('//*[@id="tsf"]/div[2]/div/div[3]/center/input[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);xPathRes.singleNodeValue.click();尝试等待元素出现然后单击它（不起作用）：var selector = "//*[@id='tsf']/div[2]/div/div[3]/center/input[1]";var time = 500;    if(document.evaluate (selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)) {        selector.singleNodeValue.click();        return;        }    else {        setTimeout(function() {        waitForElementToDisplay(selector, time);        }, time);        }如您所见，示例中的代码是 Google.com 搜索按钮。我一直使用 Python Selenium 来做这样的事情，但在这种情况下我真的不能。附注。我很讨厌 JS，因为从发布的代码中可以看出这一点。感谢您尝试提供帮助！编辑：在@folo 代码之后，我写了这样的东西：var element = '//*[@id="tsf"]/div[2]/div/div[3]/center/input[1]';(function checkIfElemExists() {   if (!document.evaluate (element, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)) {     console.log('nope')     window.requestAnimationFrame(checkIfElemExists);   } else {     console.log('okay i exist now! lets do something.')    } })()问题是它总是返回“好吧，我现在存在！）即使我在不包含此元素的网站上运行它。

Answer 1

如果我理解正确，您想确定元素何时开始存在于 DOM 中？

如果是这样，您应该使用 requestAnimationFrame

 (function checkIfElemExists() {

   if (!document.querySelector('.some-element')) {

     window.requestAnimationFrame(checkIfElemExists);

   } else {

     console.log('okay i exist now! lets do something.')

   }

 })()

每当在浏览器中请求新框架时，它都会检查该元素是否存在，如果存在，它将停止并执行您想做的任何事情。它有效和干净。

编辑：

我不确定我是否理解如果您可以使用 xpath 就不能使用 css 选择器，如果您要使用 css 选择器，这将是一个：

#tsf>div:nth-of-type(2)>div>div:nth-of-type(3)>center>input:nth-of-type(1)

用它替换“.some-element”选择器。

Answer 2

该按钮仅在页面 (DOM) 完全加载时才会出现。在 javascript 中，您可以使用 'onload'-事件：

window.onload = function () { 

   //Code to execute when page is loaded.

}

或者通过 JQuery：

$( document ).ready(function() {

    //Code to execute when page is loaded.

});

我希望这就是你正在寻找的。