Question

当您必须等待第二个按钮出现时，如何重复单击两个按钮？

2021-03-20

313

javascript

我正在编写一个简单的脚本，该脚本循环遍历页面上的所有元素，并使用原生 JavaScript 共享它们。以下是我目前所拥有的

var buttons = document.getElementsByClassName('share-gray-large');
for(var i=0; i<buttons.length; i++){
    buttons[i].click();
    document.getElementsByClassName('internal-share__link')[0].click();
}

share-gray-large 按钮是“共享”按钮的类。单击第一个共享按钮后，会出现一个模式，询问用户他们想要将项目共享到哪里。我需要单击模式中类名为 internal-share__link 的第一个项目。我遇到的问题是，我代码的最后一行导致以下错误

Uncaught TypeError: Cannot read property 'click' of undefined

这是有道理的，因为在调用第二个 click() 函数时模式尚未出现。我需要等待元素出现，然后单击它，然后等到模式消失才能共享下一个项目。我研究了 async/await 函数、 setTimeout() 以及类似 StackOverflow 问题的解决方案。我采用了这个辅助解决方案

var waitForEl = function(className, callback) {
    if (document.getElementsByClassName(className).length) {
        callback();
    } else {
        setTimeout(function() {
            waitForEl(className, callback);
        }, 100);
    }
};

var buttons = document.getElementsByClassName('share-gray-large');
for(var i=0; i< buttons.length; i++){
    waitForEl('share-gray-large', function() {
        document.getElementsByClassName('share-gray-large')[i].click();
    });
    waitForEl('internal-share__link', function() {
        document.getElementsByClassName('internal-share__link')[0].click();
    });
}

，它有点有效，但我相信它实际上最终会多次共享最后一项，而不是按顺序共享所有项。我在另一个项目中也遇到了需要等待按钮出现的问题，因此任何帮助都将不胜感激！

TL;DR 我正在按照以下步骤顺序进行项目。使用包含 3 个需要共享的项目的页面：

单击第一个按钮上的“共享”
等待确认按钮出现在模式中
单击确认
等待模式消失
单击第二个按钮上的“共享”
重复步骤 2-4
单击第三个按钮上的“共享”
重复步骤 2-4

如何在 VanillaJS 中执行此操作？

Answer 1

这将点击从最后一个到第一个共享按钮，排除电子邮件共享，并确保浏览器被允许点击/打开多个弹出窗口。

function waitForElement(selector) {
    var element = document.querySelectorAll(selector);
    if (element.length) {
        if (shareLinkCount == 999) { // set to real number of elements
            shareLinkCount = element.length;
        }
        shareLinkCount--;
        var shareElement = element[shareLinkCount];
        if(shareElement.textContent != "Email") // Do not click email share 
            element[shareLinkCount].click();

        if (shareLinkCount) { // not 0
            setTimeout(clickShareButton, 500);
        }
        else{
            alert('Click Finished');
            document.body.click();
        }
    } else {
        setTimeout(waitForElement, 500, selector);
    }
}

function clickShareButton() {
    var button = document.querySelector('.share-gray-large');
    button.click();
    waitForElement('internal-share__link');
}

var shareLinkCount = 999; // dummy number

clickShareButton();

Answer 2

这是对我有用的答案。大部分解决方案都归功于 @uingtea 。由于我没有发布网站链接，因此我能够测试它并修改他们的解决方案以满足我的需求。

function waitForElement(selector) {
    var element = document.querySelector(selector);
    if (element) {
        shareLinkCount--;
        element.click();

        if (shareLinkCount) { // not 0
            setTimeout(clickShareButton, 500);
        }
        else{
            element.click();
            alert('Click Finished');
        }
    } else {
        setTimeout(waitForElement, 500, selector);
    }
}

function clickShareButton() {
    document.querySelectorAll('.share-gray-large')[shareLinkCount].click();
    waitForElement('.internal-share__link');
}

var shareLinkCount = document.querySelectorAll('.share-gray-large').length - 1;


clickShareButton();