禁用提交按鈕，直到 recaptcha3 g-recaptcha-response 值被檢索

Question

現在 SEO 對網站加載速度有重大影響，當我添加 google recaptcha3 時，它會在 google lighthouse 結果中將我的網站速度降低到 35-40%，這就是為什么我決定僅在用戶單擊或填寫表單字段時加載 recaptcha3 lib。 我寫了這段代碼，它對我來說很好用。

---

Html 表單域

 <div class="control is-loading"> <input name="instauser" id="author" class="input is-rounded is-focused is-medium" type="text" placeholder="https://instagram.com/p/41SW_pmmq4/"> </div> <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value=""> <div class="control has-text-centered"><br> <button id="Button" type="submit" class="button is-danger is-active is-medium">Download &nbsp <img src="{{ asset('svg/downloads.svg') }}" width="25px" alt="Instagram video download" /> </button> </div> </form>

javascript代碼

<script type="text/javascript"> var reCaptchaFocus = function() { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy'; head.appendChild(script); var recaptchaInterval = setInterval(function() { if( !window.grecaptcha || !window.grecaptcha.execute ) { return; } clearInterval( recaptchaInterval ); grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) { document.getElementById('g-recaptcha-response').value=token; }); }, 100 ); document.getElementById('author').removeEventListener('focus', reCaptchaFocus); }; document.getElementById('author').addEventListener('focus', reCaptchaFocus, false); </script>

但現在的問題是，當用戶互聯網速度較慢時，加載隱藏的 g-recaptcha-response 輸入值需要時間，因此有時用戶在加載隱藏的 g-recaptcha-response 值之前提交表單。 這就是為什么我想禁用提交按鈕，直到 g-recaptcha-response 值被填入隱藏的輸入類型以避免任何錯誤.....英雄是測試的網站https://igsavers.com

需要一些幫助

Answer 1

這是我的問題的答案

<script type="text/javascript">
var reCaptchaFocus = function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
head.appendChild(script);
document.getElementById("Button").disabled = true;

var recaptchaInterval = setInterval(function() {
if( !window.grecaptcha || !window.grecaptcha.execute ) { return; }

clearInterval( recaptchaInterval );

grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
document.getElementById("Button").disabled = false;
//document.querySelector('button[type="submit"]').setAttribute('disabled', '');
});
}, 100 );
    document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
    };
    document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
</script>