3

我在我的页面上设置了 reCAPTCHA v3：

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>

如果互联网连接变得不可用或不可靠，reCAPTCHA 将在我的页面底部插入此 HTML：

<div>
  <div>
    Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
  </div>
</div>

我宁愿在我的 JavaScript 中处理这个错误，以便以更好的方式向用户显示它。但是，v3 的文档并未说明如何执行此操作。

有关如何捕获此错误的任何想法？

4

1 回答 1

1

您可以在脚本标签本身中放置一个 onerror 处理程序：

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">

但我认为你想要的更像是reCAPTCHA v2提供的内容：

widgetId = grecaptcha.render('example1', {
    'sitekey' : 'your_site_key',
    'theme' : 'light',
    'error-callback' : error_handler()
});

我怀疑这行得通，但还有另一种方法。您只需要监视 DOM 的更改，因为您知道当出现错误时，Google 会在您的页面中添加一个 div。你可以用MutationObserver做到这一点。

var m = new MutationObserver(function (mutationRecords) {
    this.disconnect();
    error_handler();
});
m.observe(document.body, {childList: true});

{childList: true} 告诉 MutationObserver 检测添加到 DOM 的节点，并将它们作为参数 mutationRecords（包含MutationRecord对象数组）传递给回调函数。从那里开始，由您决定下一步该做什么。

这至少应该足以让你开始！

于 2020-10-24T22:03:47.940 回答