Javascript 仅在React应用程序的特定页面上显示google Recaptcha V3浮动框

我已经用多个#路由和google recaptcha v3实现了react应用程序

我只想在特定页面（#路径）上显示recaptcha浮动程序，如登录和表单

如何做到这一点

尝试-

.grecaptcha徽章{
可见性：隐藏；
}
#root#mainContainer.login:not（.empty）+div>.grecaptcha badge{
能见度：可见；
}

我（和其他许多人一样）也有同样的问题

在我的例子中，我使用react路径，在那里我可以听到路径的变化。 因此，我最终删除了我不需要的页面上的脚本和徽章元素，并在某些路径上添加了它（如果必要）

const loadRecaptcha = () => {
    const script = document.createElement("script");

    script.src = "https://www.google.com/recaptcha/api.js?render=lalala";
    script.id = 'recaptcha-script';
    script.async = true;

    document.body.append(script);
}

const removeRecaptcha = () => {
    const script = document.getElementById('recaptcha-script');
    if (script) {
        script.remove();
    }

    const recaptchaElems = document.getElementsByClassName('grecaptcha-badge');
    if (recaptchaElems.length) {
        recaptchaElems[0].remove();
    }
}

---

如果我们希望在您的react应用程序中有条件地删除Google的reCAPTCHA，希望它对将来的用户有所帮助。我们可以使用CDM（）生命周期方法：

删除脚本

取下reCAPTCHA徽章

我正在使用并检查GoogleRecaptChapProvider的类，我们可以找到scriptId 正如Ivan Yulin在上面提到的，这是完全一样的

const script = document.querySelector(scriptId);
        if (script) {
            script.remove();
        }
        const recaptchaElems = document.getElementsByClassName('grecaptcha-badge');
        if (recaptchaElems.length) {
            recaptchaElems[0].remove();
        }

但是，即使删除了脚本，我在DOM脚本中也看到了

<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=*********"></script>

---

我们如何将其删除？

在组件外部声明：

consttogglecaptchabadge=（show:boolean）=>{
const badge=document.getElementsByClassName（'grecaptcha-badge'）[0]；
if（HtmleElement的徽章和徽章实例）{
badge.style.visibility=显示“可见”：“隐藏”；
}
};

内部调用此

useffect

hook:

useEffect(() => {
    toggleCaptchaBadge(true);
    return () => toggleCaptchaBadge(false);
  }, []);

---

使用CSS作为隐藏recaptcha元素的手段违反了Google服务条款（），除非您通知用户您正在通过其他方式使用recaptcha。如果您的目标只是在某些页面中省略recaptcha，那么我建议您根本不渲染它们（在那些特定页面上）。