在提交表單之前，如何確保重新驗證碼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.
}