如何管理 Google reCaptcha v3 中的错误消息（不可见）

Question

我们正在我们的网站中实施“新的”Google reCaptcha v3，这应该是不可见的，但是，如果您的实施一切顺利，您将收到一个粘性徽章，证明您的网站受到这项技术的保护。

那个不是问题，因为Google provides information about how to hide it and the most important, if you could do it or not。

当用户尝试进入您的网站 with an old browser 时，问题就出现了，reCaptcha 服务停止工作，并将此代码放在您的网络末尾：

<div>
  <div>
    <noscript>Enable JavaScript to get a reCAPTCHA challenge.<br></noscript>
    <div class="if-js-enabled">Get a <a href="https://support.google.com/recaptcha/?hl=en#6223828">compatible browser</a>
to get a reCAPTCHA challenge.
    </div>
    <br>
    <br>
    <a href="https://support.google.com/recaptcha#6262736" target="_blank">Why do I have to do this?</a>
  </div>
</div>

我没有找到任何关于如何管理此错误的文档、线程等。

我只想管理这个异常，并尽可能以最简洁的方式隐藏这段代码。

还有其他人不得不面对这个错误吗？

Answer 1

如果您只是想从用户的视图中隐藏此内容，您可以使用 CSS：

.if-js-enabled, .if-js-enabled ~ * {
    display: none;
}

（我会避免告诉您停止支持旧浏览器并假设您有充分的理由这样做的诱惑?）

编辑： 或者，如果您不想依赖 Google 的类名保持不变（即使理论上它们应该适用于给定版本的 reCAPTCHA），您可以将其他一些父 div 中的消息。假设它显示在与徽章相同的位置，您可以内联渲染徽章（请参阅this answer）并将 CSS 规则应用于您分配给父 div 的一些自定义类。