[英]How to make sure that the re-captcha js file has been loaded before submitting a form?
I have a recaptcha and a registration form. 我有一个验证码和一份注册表。 Here's a simple version of a handler:
这是处理程序的简单版本:
//my_script.js
document.getElementById("my_form").onsubmit = function(e) {
e.preventDefault();
grecaptcha.execute();
var grecap_resp = grecaptcha.getResponse();
if (grecap_resp.length !== 0) {
And the js files: 和js文件:
<script src="my_script.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Sometimes I have to click the submit button twice. 有时我必须单击两次提交按钮。 I believe it's caused by the fact that "recaptcha/api.js" hasn't been loaded yet when I'm clicking on the button.
我相信这是由于当我单击按钮时尚未加载“ recaptcha / api.js”这一事实造成的。 As I can see, when it's been loaded, all is working well.
如我所见,加载完成后,一切运行良好。
How can I fix this? 我怎样才能解决这个问题?
As the docs say , you can pass an onload parameter with a function name that will be called when it is loaded: 如文档所述 ,您可以传递一个带有函数名称的onload参数,该参数将在加载时被调用:
<script src="my_script.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded&render=explicit" async defer></script>
And inside your my_script.js
: 在您的
my_script.js
:
window.recaptchaLoaded = function() { // "window..." so is defined on the global scope
console.log("Yay! captcha loaded"); // Here you should add your logic to show/enable the button that is disabled/hidden by default.
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.