有没有办法让 reCaptcha 响应 div

Question

有没有办法让我可以让它适应内部并响应？

** 有问题的更新**：我无法更改 recaptcha 代码，因为我的后端验证了 recaptcha

如果我可以在该元素的一侧进行更改，请告诉我，谢谢

Answer 1

Google reCaptcha 是作为 iframe 生成的，所以它有自己的一套完整的 CSS/else 库，这使得它很难~无法编辑它，因为 Same-domain 政策.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

您可以将 data-size attribute 设置为 compact 这可能会有所帮助

<div class="g-recaptcha" data-sitekey="your_site_key" data-size="compact"></div>

https://developers.google.com/recaptcha/docs/display

由于无法修改HTML源，可以使用jQuery将data-size属性添加到g-recaptchadiv。确保你也使用 CDN 在某处加载 jQuery。使用 DevTools 检查页面，找到 div，然后使用 JS 定位其 class 或 ID，并使用 .attr() 向其添加属性。

$('.g-recapatcha').attr('data-size','compact');

Answer 2

即使无法更改 HTML 中的代码，您也可以在 CSS 中调整 iframe 的宽度。

@media only screen and (max-width:480px){
  iframe{
  position: relative;
  width:70%;
  left: -69px;
  }
}

Answer 3

你应该听 avia 并使用 data-size 属性：compact 或 normal， 我的网站上有 DOMContentLoaded，它检查屏幕是否小于 px， 然后 setAttribute 变成 div。查看：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
    if (window.innerWidth < 476) {
    document.getElementById("recaptcha-div").setAttribute('data-size','compact');
    }else{
    document.getElementById("recaptcha-div").setAttribute('data-size','normal');
    };
    });
    </script>

    <div id="recaptcha-div" class="g-recaptcha" data-theme="dark" data-sitekey="xxxx"></div>