时间戳

首页 > 解决方案 > 除非我在检查元素打开的情况下重新加载页面，否则不会出现 Recaptcha (v2)

javascript - 除非我在检查元素打开的情况下重新加载页面，否则不会出现 Recaptcha (v2)

问题描述

我根据官方文档为登录页面实现了 recaptcha v2。我在 head 标签的末尾插入了脚本，并在表单中添加了一个 recaptcha div。代码与此类似：

 ...
   <script src='https://www.google.com/recaptcha/api.js'></script>

</head>

<body ng-app="myApp" ng-controller="main">
....


<div  class="g-recaptcha" data-sitekey="mykey"></div>

</form>

当我打开登录页面时，验证码应该有一些空间，但验证码不存在（可见）。如果我在 chrome 中打开元素检查器，然后重新加载页面，就会出现验证码。在重新加载之前和之后将页面与元素检查器进行比较，这是我在重新加载之前得到的：

 <div class="row text-center captcha_row"> 
     <div class="col-sm-12"> 
         <div class="form-group"> 
             <div class="g-recaptcha" data-sitekey="mykey"></div> 
         </div> 
    </div> 
</div>

重新加载后，它看起来像这样：

<div class="row text-center captcha_row"> 
    <div class="col-sm-12"> 
        <div class="form-group"> 
        <div class="g-recaptcha" data-sitekey="mykey">
            <div style="width: 304px; height: 78px;">
                <div>
                    <iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=mykey..." width="304" height="78" role="presentation" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox">
                         #document...
                    </iframe>
                </div>
                <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
                </textarea>
            </div>
         </div> 
         </div> 
    </div> 
</div>

在这两种情况下完成的请求列表也不相同。

我确定密钥是正确的。我不知道还要检查什么。测试是用谷歌浏览器完成的。在控制台部分，我没有看到任何错误。

标签： javascripthtmlrecaptcha

解决方案

推荐阅读