javascript - 仅当用户交互但未获取隐藏输入字段中的值时才触发加载 recaptcha 库

Question

众所周知，页面速度在 SEO 中起着重要作用，每当您尝试实现 google Recaptcha v3 时，它都会大大降低您的网站速度。这就是为什么我决定仅在用户与输入表单交互时才触发 reCaptcha 库的加载/执行/运行。实际上，这很有可能..这是我的代码和网站 igsavers ...

    <form method="post" action="/video">
    {{ csrf_field() }}
    <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 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>
    <script type="text/javascript">
        // trigger loading api.js (recaptcha.js) script
        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);

        // remove focus to avoid js error:
        // Uncaught Error: reCAPTCHA has already been rendered in this element at Object.kh
        document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
        };
        // add initial event listener to our basic HTML form
        document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
    </script>

此代码运行良好，但问题是隐藏的输入类型 g-recaptcha-response 值将保持为空。这是我在这个领域增加值(value)的代码

<script>grecaptcha.ready(function() {
    grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
       document.getElementById('g-recaptcha-response').value=token;
    });
});</script>

帮助我弄清楚我在代码中更改了什么以加载隐藏输入类型中的值。

Answer 1

如果不先加载 recaptcha 脚本，就不能使用 grecaptcha.ready 事件。你应该删除

<script>grecaptcha.ready(function() {
    grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
       document.getElementById('g-recaptcha-response').value=token;
    });
});</script>

并在加载脚本后放置它:

<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>