有没有 recaptcha v2 关闭事件？

我用这样的代码渲染 grecaptcha

let callback;
const p = new Promise((resolve) => callback = (result) => resolve(result));

grecaptcha.render(el, {
    sitekey: window.settings.recaptchaKey,
    size: "invisible",
    type: "image",
    callback: result => callback(result),
    badge: "inline"
});

const key = await p;

一切正常，但如果用户单击 recaptcha 模式的背景，recaptcha 会关闭并且我无法检测到它，所以我无限等待响应

我需要某种事件或回调来检测它何时关闭

不幸的是，Google 没有 API 事件来跟踪这一点，但我们可以使用变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver我们自己通过 Google API 来跟踪 DOM 更改的 Web API。

我们这里有两个挑战。

1) 检测挑战何时显示并获取挑战的覆盖 div

function detectWhenReCaptchaChallengeIsShown() {
    return new Promise(function(resolve) {
        const targetElement = document.body;

        const observerConfig = {
            childList: true,
            attributes: false,
            attributeOldValue: false,
            characterData: false,
            characterDataOldValue: false,
            subtree: false
        };

        function DOMChangeCallbackFunction(mutationRecords) {
            mutationRecords.forEach((mutationRecord) => {
                if (mutationRecord.addedNodes.length) {
                    var reCaptchaParentContainer = mutationRecord.addedNodes[0];
                    var reCaptchaIframe = reCaptchaParentContainer.querySelectorAll('iframe[title*="recaptcha"]');

                    if (reCaptchaIframe.length) {
                        var reCaptchaChallengeOverlayDiv = reCaptchaParentContainer.firstChild;
                        if (reCaptchaChallengeOverlayDiv.length) {
                            reCaptchaObserver.disconnect();
                            resolve(reCaptchaChallengeOverlayDiv);
                        }
                    }
                }
            });
        }

        const reCaptchaObserver = new MutationObserver(DOMChangeCallbackFunction);
        reCaptchaObserver.observe(targetElement, observerConfig);
    });
}

首先，我们创建了一个目标元素，我们将观察它的 Google iframe 外观。我们将 document.body 定位为 iframe 将附加到它：

const targetElement = document.body;

然后我们为 MutationObserver 创建了一个配置对象。在这里，我们可以指定我们到底跟踪 DOM 更改的内容。请注意，默认情况下所有值都是“false”，因此我们只能保留“childList” - 这意味着我们只会观察目标元素的子节点更改 - 在我们的例子中为 document.body：

const observerConfig = {
    childList: true,
    attributes: false,
    attributeOldValue: false,
    characterData: false,
    characterDataOldValue: false,
    subtree: false
};

然后我们创建了一个函数，当观察者检测到我们在配置对象中指定的特定类型的 DOM 更改时将调用该函数。第一个参数代表一个数组变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver对象。我们抓住了覆盖层 div 并带着 Promise 返回。

function DOMChangeCallbackFunction(mutationRecords) {
    mutationRecords.forEach((mutationRecord) => {
        if (mutationRecord.addedNodes.length) { //check only when notes were added to DOM
            var reCaptchaParentContainer = mutationRecord.addedNodes[0];
            var reCaptchaIframe = reCaptchaParentContainer.querySelectorAll('iframe[title*="recaptcha"]');

            if (reCaptchaIframe.length) { // Google reCaptcha iframe was loaded
                var reCaptchaChallengeOverlayDiv = reCaptchaParentContainer.firstChild;
                if (reCaptchaChallengeOverlayDiv.length) {
                    reCaptchaObserver.disconnect(); // We don't want to observe more DOM changes for better performance
                    resolve(reCaptchaChallengeOverlayDiv); // Returning the overlay div to detect close events
                }
            }
        }
    });
}

最后我们实例化了一个观察者本身并开始观察 DOM 变化：

const reCaptchaObserver = new MutationObserver(DOMChangeCallbackFunction);
reCaptchaObserver.observe(targetElement, observerConfig);

2）第二个挑战是该帖子的主要问题 - 我们如何检测挑战已结束？那么，我们又需要 MutationObserver 的帮助了。

detectReCaptchaChallengeAppearance().then(function (reCaptchaChallengeOverlayDiv) {
    var reCaptchaChallengeClosureObserver = new MutationObserver(function () {
        if ((reCaptchaChallengeOverlayDiv.style.visibility === 'hidden') && !grecaptcha.getResponse()) {
            // TADA!! Do something here as the challenge was either closed by hitting outside of an overlay div OR by pressing ESC key
            reCaptchaChallengeClosureObserver.disconnect();
        }
    });
    reCaptchaChallengeClosureObserver.observe(reCaptchaChallengeOverlayDiv, {
        attributes: true,
        attributeFilter: ['style']
    });
});

因此，我们所做的就是使用我们在步骤 1 中创建的 Promise 获取 Google reCaptcha 挑战覆盖 div，然后在覆盖 div 上订阅“样式”更改。这是因为当挑战结束时 - 谷歌将其淡出。 需要注意的是，当一个人成功解决验证码时，可见性也会被隐藏。这就是我们添加 !grecaptcha.getResponse() 检查的原因。除非挑战得到解决，否则它将不会返回任何内容。 差不多就是这样了 - 我希望有帮助:)