如何查看是否显示Google Recaptcha V2 Puzzle？
How Can I Check if Google Recaptcha V2 Puzzle is Displayed?
当 Recaptcha 显示拼图而不是复选框时，我正在尝试调整容器的大小 div。这通常在单击复选框后发生。我该怎么做？
我知道在某些情况下会强制 Recaptcha V2 显示拼图而不是复选框。然而，Api 并不是 return 一个 属性 或表明此更改已经发生的事件。 JavaScript 或通过 API 有什么方法可以识别 Recaptcha V2 是否正在显示拼图？
注意：这是在我没有在 API 中指定 fallback=true 的情况下url.
以下是使用 setInterval 执行此操作的方法。如果用户从不选中该框，这可能会终止浏览器。您可能希望延迟 运行 直到他们开始填写表格或等到他们 mouseover/focus 在 reCaptcha 元素上。您可能还需要一个更具体的选择器（通过将您的 recaptcha 包装在 div 中）以防您有其他 iframe 可以在代码中使用相同的标题。如评论中所述，使用 mutationObserver 是一个更好的主意。
希望这能满足您的需求。
function isPuzzleDisplayed (selector) {
/**
* @param {string} selector
* @returns boolean - if the specified element exists
*/
return document.querySelectorAll(selector).length >= 1;
}
var timer = setInterval(function () {
/**
* Check if element exists every 0 seconds.
* If it does, kill timer, else keep running forever!
* WARNING! This is not performant.
*/
if (isPuzzleDisplayed('iframe[title*="recaptcha challenge"]')) {
console.log('But this is how you do it!');
/* run your code here */
clearInterval(timer);
timer = 0;
} else {
console.log('It is true the Api however does not return a property or event that would indicate that this change has happened. >', timer);
}
}, 0);
不幸的是，Google 没有 API 事件来跟踪这个，但我们可以使用 Mutation Observer 网络 API 来跟踪 DOM我们自己更改 Google 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);
希望对您有所帮助:)
当 Recaptcha 显示拼图而不是复选框时，我正在尝试调整容器的大小 div。这通常在单击复选框后发生。我该怎么做？
我知道在某些情况下会强制 Recaptcha V2 显示拼图而不是复选框。然而，Api 并不是 return 一个 属性 或表明此更改已经发生的事件。 JavaScript 或通过 API 有什么方法可以识别 Recaptcha V2 是否正在显示拼图？
注意：这是在我没有在 API 中指定 fallback=true 的情况下url.
以下是使用 setInterval 执行此操作的方法。如果用户从不选中该框，这可能会终止浏览器。您可能希望延迟 运行 直到他们开始填写表格或等到他们 mouseover/focus 在 reCaptcha 元素上。您可能还需要一个更具体的选择器（通过将您的 recaptcha 包装在 div 中）以防您有其他 iframe 可以在代码中使用相同的标题。如评论中所述，使用 mutationObserver 是一个更好的主意。
希望这能满足您的需求。
function isPuzzleDisplayed (selector) {
/**
* @param {string} selector
* @returns boolean - if the specified element exists
*/
return document.querySelectorAll(selector).length >= 1;
}
var timer = setInterval(function () {
/**
* Check if element exists every 0 seconds.
* If it does, kill timer, else keep running forever!
* WARNING! This is not performant.
*/
if (isPuzzleDisplayed('iframe[title*="recaptcha challenge"]')) {
console.log('But this is how you do it!');
/* run your code here */
clearInterval(timer);
timer = 0;
} else {
console.log('It is true the Api however does not return a property or event that would indicate that this change has happened. >', timer);
}
}, 0);
不幸的是，Google 没有 API 事件来跟踪这个，但我们可以使用 Mutation Observer 网络 API 来跟踪 DOM我们自己更改 Google 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);
希望对您有所帮助:)