Question

有没有一种方法可以使它适应内部并做出响应？

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

请让我知道，如果我可以在该元素的另一侧进行更改，谢谢

Answer 1

Google reCaptcha是作为iframe生成的，因此它具有自己完整的CSS / else库集，并且由于具有相同域的政策，很难对其进行编辑。

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-recaptcha div中。确保您也使用CDN加载jQuery。使用DevTools检查该页面，找到div，然后使用JS定位其类或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>

有没有一种方法可以使reCaptcha响应div

3 个答案: