javascript - 如何检查Google Recaptcha V2 Puzzle是否显示？

Question

当 Recaptcha 显示谜题而不是复选框时，我尝试调整容器 div 的大小。这通常发生在单击复选框后。我怎样才能做到这一点？

我知道在某些条件下会强制 Recaptcha V2 显示谜题而不是复选框。然而，API 不会返回表明此更改已发生的属性或事件。有没有一种方法可以通过 JavaScript 或 API 来识别 Recaptcha V2 是否正在显示拼图？

注意:这是在我没有在 API 网址中指定 Fallback=true 的情况下发生的情况。

Answer 1

遗憾的是，Google 没有 API 事件来跟踪此情况，但我们可以使用 Mutation Observer我们自己通过 Google API 来跟踪 DOM 更改的 Web API。 浏览器对它的支持非常好:

首先，我们需要创建一个目标元素，我们将观察该元素的 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 更改时将调用该函数。第一个参数表示 Mutation Observer 的数组对象

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
                console.log('Yay!');
                reCaptchaObserver.disconnect(); // We don't want to observe more DOM changes for better performance
                // Challenge was loaded -- DO SOMETHING HERE
            }
        }
    });
}

差不多就是这样了。唯一剩下的事情 - 实例化观察者本身并开始观察 DOM 变化:

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

希望有帮助:)