javascript - 新的 Google reCAPTCHA JavaScript 命名空间回调

Question

我们正在尝试在我们的网站上实现新的 Google reCAPTCHA，但是当我们尝试使用命名空间函数从中加载回调时，回调不会运行。

将回调更改为不使用回调可以正常工作。我们正在使用 Google Maps API 做一些类似的事情，它运行良好。

有什么办法可以解决这个问题，或者这是新的 Google reCAPTCHA 系统的限制吗？

代码

<script>
    var namespace = {};
    namespace.captcha = function() {
        alert("Hello world!")
    };
</script>
<script src="//www.google.com/recaptcha/api.js?onload=namespace.captcha&render=explicit" async defer></script>

真正的问题是我们希望使用显式模块化模式将所有代码封装在命名空间脚本中。解决此问题的一种方法是创建一个全局变量并将其用作回调，但它并没有放弃我所希望的。

全局回调

<script>
    var namespace = {};
    namespace.captcha = (function() {         
        function call() {
            alert("Hello world!")
       };
       window.callback = namespace.captcha.call;   
       return call:call;
    })();
</script>
<script src="//www.google.com/recaptcha/api.js?onload=callback&render=explicit" async defer></script>

Answer 1

您可以使用 Javascript API 来做到这一点设置回调。

这将允许您在使用框架时使用命名空间回调，甚至范围保护回调。

我没法测试，举个例子:

var script = document.createElement('script');

script.id = 'container'
script.src = '//www.google.com/recaptcha/api.js?render=explicit';
script.async = true;
script.defer = true;

script.onload = () => { ... };

document.body.appendChild(script);

对于V3

你的 script.onload 函数可能是这样的:

grecaptcha.ready(function() {
  namespace.captcha();
});

对于V2

你的 script.onload 函数可能是这样的:

grecaptcha.render('container', { 
  callback: namespace.captcha
});