如何确保在提交表单之前已经加载了重新验证js文件？

Question

我有验证码和注册表。这是处理程序的简单版本：

  //my_script.js

  document.getElementById("my_form").onsubmit = function(e) {
    e.preventDefault();
    grecaptcha.execute();
    var grecap_resp = grecaptcha.getResponse();
    if (grecap_resp.length !== 0) {

和 js 文件：

<script src="my_script.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

有时我必须点击提交按钮两次。我相信这是因为当我点击按钮时 "recaptcha/api.js" 还没有被加载。如我所见，加载后一切正常。

我该如何解决这个问题？

Answer 1

同the docs say一样，可以传入一个onload参数，参数名是加载时调用的函数名：

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

在你的 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.
}

如何确保在提交表单之前已经加载了重新验证js文件？

How to make sure that the re-captcha js file has been loaded before submitting a form?

html

javascript

recaptcha