Fatal编程技术网
  • javascript/
  • Javascript 显式呈现ReCaptcha-Onload函数未触发

Javascript 显式呈现ReCaptcha-Onload函数未触发

javascript html

Javascript 显式呈现ReCaptcha-Onload函数未触发,javascript,html,recaptcha,Javascript,Html,Recaptcha,从文档中我了解到，为了更改recaptcha的语言，我必须显式地呈现它 然而，问题是它没有真正显示出来，甚至没有调用onload。 当我尝试自动渲染它时，它确实起作用 代码如下： 在HTML标题中：（我还尝试将其放在body标记的末尾） 我只是复制了你的代码，使用了我自己的站点密钥，它就工作了 我使用的代码是： <html> <body> <p>ReCaptcha Test</p> <div id="recaptcha"

从文档中我了解到，为了更改recaptcha的语言，我必须显式地呈现它

然而，问题是它没有真正显示出来，甚至没有调用
onload
。
当我尝试自动渲染它时，它确实起作用

代码如下：
在HTML标题中：（我还尝试将其放在body标记的末尾）

我只是复制了你的代码，使用了我自己的站点密钥，它就工作了

我使用的代码是：

<html>
  <body>
    <p>ReCaptcha Test</p>

    <div id="recaptcha"></div>

    <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready'); // showing
        grecaptcha.render("recaptcha", {
            sitekey: 'SITE_KEY',
            callback: function () {
                console.log('recaptcha callback');
            }
        });
      }
    </script>

  </body>
</html>


雷帕查试验

var recaptchaCallback=函数（）{
console.log（'recaptcha已准备就绪'）；//显示
grecaptcha.render（“recaptcha”{
sitekey:“站点密钥”，
回调：函数（）{
log（'recaptcha回调'）；
}
});
}
仔细检查您的代码，因为只有一个字符的输入错误就可能停止工作。

请确保在recaptcha脚本之前定义了onload方法。否则，您将遇到一个竞争条件，在这种情况下，recaptcha脚本可能会在定义方法之前尝试调用您的方法（特别是在缓存了recaptcha脚本的情况下）

从文档中获取onload

注意：onload回调函数必须在 RECAPTCHAAPI加载。为确保不存在竞赛条件：

  • 首先使用回调命令命令脚本，然后使用reCAPTCHA命令脚本
  • 在脚本标记中使用async和defer参数
例如：

<div id="recaptcha"></div>


<script type="text/javascript">
  var recaptchaCallback = function () {
    console.log('recaptcha is ready'); // not showing
    grecaptcha.render("recaptcha", {
        sitekey: 'SITE_KEY',
        callback: function () {
            console.log('recaptcha callback');
        }
    });
  }
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>


var recaptchaCallback=函数（）{
console.log（'recaptcha已准备就绪'）；//不显示
grecaptcha.render（“recaptcha”{
sitekey:“站点密钥”，
回调：函数（）{
log（'recaptcha回调'）；
}
});
}
HTML

我的问题是，我没有意识到第二次回调仅在提交表单时触发-而第一次回调是在页面加载时执行的。

您可能需要检查
头部的
标记-您不能这样调用
onload
方法-它需要转到其他地方，就像在你的
标记中一样。
recaptchaCallback
被定义了，但是它什么时候被调用？@Raad感谢你的快速评论，我忘了提到我也试着把脚本放在body标记的末尾。@Alex根据，脚本URL中的
onload
参数应说明回调函数的名称。您需要使用
标记加载
../recaptcha/api.js
脚本，但使用
标记的
onload
属性调用
recapchacallback
函数，这是一个由两部分组成的实现。谢谢你的回答。这次我又从你的代码中复制了所有内容，但仍然不起作用。我已经检查了很多网站的关键和重新排序的脚本，但仍然没有。如果有错误，我可能会得到一个错误，但我什么也得不到。@Gofilord-这听起来像是另一个问题-例如，从Google加载recaptcha脚本可能有问题。使用浏览器的开发人员模式，检查浏览器中的请求发生了什么-在控制台或“网络”选项卡中查找任何错误。这真的很奇怪，但我今天早上尝试了它，没有做任何更改，它成功了。谢谢你的时间。@Gofilord-很高兴你终于到了那里@导致这种情况的一个原因是带宽低。假设您的下载速度为1MB/s，并且在加载recaptcha的同时下载一个文件，有时会失败

var recaptchaCallback = function() {
  console.log('recaptcha is ready'); // not showing
  grecaptcha.render("recaptcha", {
    sitekey: 'My Site Key',
    callback: function() {
      console.log('recaptcha callback');
    }
  });
}



<html>
  <body>
    <p>ReCaptcha Test</p>

    <div id="recaptcha"></div>

    <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready'); // showing
        grecaptcha.render("recaptcha", {
            sitekey: 'SITE_KEY',
            callback: function () {
                console.log('recaptcha callback');
            }
        });
      }
    </script>

  </body>
</html>



<div id="recaptcha"></div>


<script type="text/javascript">
  var recaptchaCallback = function () {
    console.log('recaptcha is ready'); // not showing
    grecaptcha.render("recaptcha", {
        sitekey: 'SITE_KEY',
        callback: function () {
            console.log('recaptcha callback');
        }
    });
  }
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>



<div id="captcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReadycallback&render=explicit' async defer'></script>



       //render captcha and set call back function on api.js load finish
       function recaptchaReadycallback(){
        grecaptcha.render('captcha', {
           'callback' : recaptchaCheckedCallback,
           'expired-callback': recaptchaExpiredCallback,
           'sitekey': 'YOUR-SITE-KEY'

         });
       }

       //on expiry do stuff. i.e. show error 
       function recaptchaExpiredCallback(){
          grecaptcha.reset();
          //show 'check the bloody box' error
       };

       //on not a robot confirmation do stuff. i.e. hide error
       function recaptchaCheckedCallback(){
          //hide 'check the bloody box' error
       }