在提交表单之前，如何确保重新验证码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

如文档所述 ，您可以传递一个带有函数名称的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.
}