Google ReCaptcha 在 ios 设备上验证时滚动到页面底部

Posted 2023-03-14

【中文标题】Google ReCaptcha 在 ios 设备上验证时滚动到页面底部

【英文标题】：Google ReCaptcha Scroll to bottom of page when verified on ios devices

【发布时间】：2017-01-27 08:03:11

【问题描述】：

我在联系表单上使用 google recaptcha。问题是，在移动设备上，当验证 google recaptcha 时，它会将使用向下滚动到页面底部。然后用户必须再次向上滚动才能提交特定表单。

这只发生在运行版本 10 或更高版本的 ios 设备上。

我无法解决这个问题。

你可以在这里看到问题https://www.digamberpradhan.com.np/contact-copy/

【问题讨论】：

这是一个已知的错误；见github.com/google/recaptcha/issues/130

【参考方案1】：

我设法找到了解决此问题的方法。 首先，您应该知道提交响应后会有回调。我所做的就是用它来集中我在这个回调中需要的东西。但是焦点在 iOS 上无法正常工作，因此您必须使用另一种解决方法，即 javascript 动画。 文档：https://developers.google.com/recaptcha/docs/display

就我而言，它看起来像这样：

<script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<div id="re-captcha" class="g-recaptcha" ></div>

如您所见，我在重新验证码加载后调用onloadCallback。此外，由于某种原因，如果您不指定 render=explicit，则不会发生回调。

<script>
    var focusWhatever = function (response) 
        $("html, body").animate( scrollTop: $("#whatever").offset().top , "slow");
    ;

    var onloadCallback = function () 
        var widget = grecaptcha.render(document.getElementById("re-captcha"), 
            'sitekey' : "yoursitekey",
            'theme': "light",
            'callback' : focusWhatever
        );
    
</script>

特别是，在这种情况下，动画会直接转到您想要的任何元素。为了让用户看起来不错，您应该选择一个高于您实际想要关注的元素。

【参考方案2】：

这是我使用的解决方法，因为我发现这个问题发生在我管理的一个 WordPress 网站中。它与 Rodrigo 的相似之处在于它看起来使用了 onload 回调；但是，我没有滚动到 $(element)offset().top，而是观看了滚动事件：将 reCAPTCHA 容器滚动到视图中后，我记下了窗口的 pageYOffset 并改为滚动到该位置

<script type="text/javascript">
window.reCaptchaPos = false;

function attachEvent(element, event, callbackFunction) 
    if (element.addEventListener) 
        element.addEventListener(event, callbackFunction, false);
     else if (element.attachEvent) 
        element.attachEvent('on' + event, callbackFunction);
    
;

function isScrolledIntoView(el)  
    var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    if(isVisible)  window.reCaptchaPos = theTop;  
    return isVisible;


window.onscroll = function()  isScrolledIntoView(document.getElementById('reCaptcha_')); ;

focusWhatever = function (response)  
          if(window.reCaptchaPos)  $("html, body").scrollTop(window.reCaptchaPos); 
  ;
</script>

这种方法更好地将 reCAPTCHA 垂直居中于 iOS 设备的视口中

【参考方案3】：

这个解决方案是对https://github.com/google/recaptcha/issues/131的轻微修改

在成功提交验证码时运行的任何函数中添加此条件：

if (window.innerWidth < 768 && (/iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)) 
    document.getElementById("rc-anchor-container").scrollIntoView();

我的修改是“rc-anchor-container”这一行。如果您检查验证码元素的控制台，到目前为止我看到的每个验证码都共享该 ID。这样，当 scrollIntoView() 运行时，它已经在视图中，因此您的页面不会移动。