Fatal编程技术网

Requirejs 重述+；安魂曲

requirejs

Requirejs 重述+；安魂曲,requirejs,recaptcha,Requirejs,Recaptcha,如何使用requirejs导入recaptcha。我已经试过几次了，但都没用 我需要这样做，以便能够在加载后使用reCaptcha的render方法自己渲染它 require.config({ 路径：{ “recaptcha”：”http://www.google.com/recaptcha/api' } }); require（['recaptcha']，函数（recaptcha）{ //用雷帕查做点什么 //recaptcha.render///此时，recaptcha未定义 控制台日志（

如何使用requirejs导入recaptcha。我已经试过几次了，但都没用

我需要这样做，以便能够在加载后使用reCaptcha的render方法自己渲染它

require.config({
路径：{
“recaptcha”：”http://www.google.com/recaptcha/api'
}
});
require（['recaptcha']，函数（recaptcha）{
//用雷帕查做点什么
//recaptcha.render///此时，recaptcha未定义
控制台日志（recaptcha）；
});

是的，我有一个解决方案给你。因此，最终的结果是，在从google api加载所需内容之前，recaptcha无法呈现

因此，您需要执行以下操作（也不要在路径中使用http/https）：

现在，这将允许在从GoogleAPI下载必要的库之后执行回调。
不幸的是，这个回调需要是全局的

JS

HTML







我希望这对你有用


链接到示例：
我知道这个问题有点老了，但我最近在我的项目中发现了另一个解决方案，它不需要创建全局方法。这个解决方案最终成为OP首次尝试将Google reCaptcha与RequireJS结合使用的一个非常简单的补充

在
main.js
中，添加以下内容：（与OP完全相同）

在执行显式渲染的JS文件中，执行以下操作：


require( ['recaptcha'], function(recaptcha) {
    // render when recaptcha is ready
    // injecting recaptcha here will give access to the grecaptcha object and it's ready method
    grecaptcha.ready(function()
        grecaptcha.render('elementId', {
          'sitekey': 'SITE_KEY',
          'callback': someCallbackMethod
        });
    );
});



这对我有效，我相信这是一个更干净的解决方案
 请以JSFIDLE、jsbin甚至堆栈片段的形式提供一个工作示例。当我尝试将
onload=
添加到OP的代码时，它不起作用。嘿，对不起。我从一开始就应该这么做。我编辑了一个指向JSBIN的链接。是的，我知道，它可以工作，但对我帮助不大，因为这些限制破坏了我的组织：（你能详细说明一下它是如何破坏你的组织的吗？你能做的是将所有添加到全局范围的渲染逻辑放在一个模块内，然后填充它。你最终得到的是一个模块，它将所有的全局讨厌之处抽象成一个可重用的模块。这就是你想要的吗？不，你的解决方案工作得很完美，后来我意识到这一点如果我收到windows的引用，我可以从我的模块内部公开一个全局函数…所以我不再有问题了。

var requireConfig = {
 paths: {
  'recaptcha': '//www.google.com/recaptcha/api.js?    onload=onloadCallback&render=explicit'
 }
};

function render(id) {
  console.log('[info] - render');
  recaptchaClientId = grecaptcha.render(id, {
    'sitekey': '6LdntQgUAAAAANdffhZl0tIHw0fqT3MwNOlAI-xY',
    'theme': 'light'
  });
};
window.renderRecaptcha = render;

var onloadCallback = function() {
  console.log('[info] - onLoadCallback');
  if (!document.getElementById('g-recaptcha')) {
    return;
  }
  window.renderRecaptcha('g-recaptcha');
};

requirejs.config(requireConfig);

require(['recaptcha'], function(recaptcha) {

});



<body>
    <form action="?" method="POST">
      <div id="g-recaptcha"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">    </script>


</body>



require.config({
    paths: {
        'recaptcha': 'http://www.google.com/recaptcha/api'
    }
});



require( ['recaptcha'], function(recaptcha) {
    // render when recaptcha is ready
    // injecting recaptcha here will give access to the grecaptcha object and it's ready method
    grecaptcha.ready(function()
        grecaptcha.render('elementId', {
          'sitekey': 'SITE_KEY',
          'callback': someCallbackMethod
        });
    );
});