验证码 + RequireJS

2023-11-29

如何使用 requirejs 导入 recaptcha。我已经尝试了几件事,但没有任何效果。

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

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

require( ['recaptcha'], function( recaptcha ) {
    // do something with recaptcha
    // recaptcha.render  /// at this point recaptcha is undefined
  console.log(recaptcha);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

是的,我有一个解决方案给你。所以最终发生的情况是,recaptcha 在从 google api 加载所需内容之前无法呈现。

因此,您需要执行以下操作(也不要在路径中使用 http/https):

require.config({
  paths: {
      'recaptcha': '//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'
  }
});

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

JS

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

});

HTML

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

我希望这对你有用!

链接到示例:https://jsbin.com/kowepo/edit?html,js,控制台,输出

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

验证码 + RequireJS 的相关文章

随机推荐

  • 另一个 enum 与 int

    我需要命名空间范围的内容 所以我可以选择使用枚举 例如 public enum Token INFORMATIONAL WARNING ABORT FATAL 但缺点是 例如在 WPF 中 我需要时不时地将它们转换为 int 所以我想 为什
  • Android 如何测量应用程序插入时的功耗

    当我的设备与电脑连接时 如何测量应用程序的功耗 我读过关于电池统计来自 Android Studio 我已按照说明操作并获取了电池统计转储系统 但是 我不能不让我的设备始终插入 USB 端口 因为 dumpsys 的结果将缺少一个名为 估计
  • 从客户端隐藏 API 密钥

    我正在尝试与 Zendesk 进行 API 集成 我有很多问题 您可以在下面看到我迄今为止提出的有关它的问题 如何在 ajax 调用中传递访问令牌 使用 Javascript 提交 ZenDesk API 票证 授权 现在是好消息 我已经在
  • 将 char 指针数组传递给函数

    我编写了以下示例代码来演示我的问题 include
  • SQL“SCRIPT”命令备份 h2 数据库

    我有一个申请h2数据库 我想创建 sql文件使用SCRIPTJava 中的命令 如果我使用准备好的语句执行它 PreparedStatement stmt con prepareStatement SCRIPT ResultSet rs s
  • 如何将 ComboBoxTableCell 放入 TableView 中?

    我试图将组合框放入表格单元格中 但我不能 代码如下 private void cargaTablaDesglose TableColumn
  • 不再需要 Class.forName(JDBC_DRIVER) ?

    我在这里读到 从 java 6 开始 您不再需要使用以下方式注册 JDBC 驱动程序 Class forName JDBC DRIVER 因为 DriverManager 使用位于系统属性中的路径 jdbc 驱动程序 以检索正确的驱动程序
  • 如何在 Windows 上后台运行命令?

    在Linux中你可以使用command 在后台运行命令 shell 离线后同样会继续 我想知道 Windows 上有类似的东西吗 我相信您正在寻找的命令是start b command 对于unix来说 nohup代表 无挂断 这与后台作业
  • 当引导加载程序写入循环设备上的文件系统时,Linux 无法识别该文件系统

    我目前正在 x86 NASM 程序集中编写一个引导加载程序 旨在从 FAT16 文件系统加载内核 R BIN 并跳转到它 我一直在将引导加载程序写入使用安装的空白映像sudo losetup loop21 image img 我会使用写图像
  • 如何平滑 CSS 渐变过渡?

    我正在使用名为的程序创建交互式触摸屏显示器直观界面并创建了一些背景瓷砖 方块 我想通过在颜色之间缓慢过渡来使其看起来 活跃 我在 CSS 中使用了线性渐变过渡来做到这一点 但问题是过渡看起来不稳定 该程序正在运行 12 个可见图块 这是一个
  • 克利夫兰心脏病数据集 - 无法描述类别

    我正在使用来自 UCI 的克利夫兰心脏病数据集用于分类 但我不明白target属性 数据集描述说值从 0 到 4 但属性描述说 0 1 gt 50 冠状动脉疾病 我想知道如何解释这个问题 这个数据集是多类还是二元分类问题 我必须将值 1 4
  • 我们是否同步最终的实例变量?如果是的话有什么用?

    我想知道我们是否同步最终的实例变量 由于变量是最终变量 因此值不能更改 有人能解释一下吗 我们是否同步最终的实例变量 是的 您仍然需要同步可变对象 最终 不可变 public class Something private final Li
  • 在没有远程服务器的情况下使用 Git 进行协作

    我正在和另外两个朋友一起做一个学校项目 我想要一种简单的方法来管理源代码控制 因此我尝试了 Git 虽然 Git 看起来很棒 有版本控制之类的东西 我如何与我的队友分享 我看过有关在远程服务器上共享的文章 但是 我可以只在我的计算机上设置
  • 无法使用变量设置变量长度

    我现在想做的是创建一个长度由变量定义的数组 但是 当我将变量放入数组长度时 它给出了 非 POD 元素类型 glm vec2 的可变长度数组 错误 但是 如果我用实际数字替换变量 错误就会消失 为什么会发生这种情况以及如何解决这个问题 in
  • 如何将完整的 RazorPage 渲染为字符串?

    我尝试使用来自的解决方案https stackoverflow com a 54043063 234954 将页面渲染为字符串 这样我可以将其转换为 PDF 但这只能让我获得主视图 它不会获得与页面关联的布局 因此它缺少样式表和一些页眉 页
  • 如何在 R 中手动创建和加载命名空间 [重复]

    这个问题在这里已经有答案了 是否可以手动创建并加载命名空间环境foo 没有做出实际的foo包 这样我们就可以使用双冒号运算符foo test访问该环境中的对象 The attach函数将列表或环境附加到搜索路径 foo lt list te
  • 如何在 Python 中将不同的进程固定到各个 cpu 核心

    我正在编写一个 Python 程序 它将从文本文件加载单词列表 然后尝试用每个单词解压缩存档 如果不利用所有 cpu 核心的话 问题并不严重 由于 GIL 如果我没记错的话 Python 中的线程并不是一个很好的选择 所以我想获取cpu c
  • 创建应用程序/产品配置的设计模式/指南

    我想知道是否有任何设计模式 指南或记录的widsom 最佳实践来创建 应用程序配置 结构 数据和文件 我意识到这个问题在一些帖子中已经部分涉及 但我希望以下问题能够促使人们从另一个方面看待这个主题 基本上 创建配置结构需要进行什么样的分析
  • Postgres 更新列数据时出错

    尝试在表上运行更新脚本 但出现错误 错误 ok 列不存在 第 2 行 设置first name ok last name pk 电子邮件 ooo 电话 CREATE TABLE employee employee id SERIAL PRI
  • 验证码 + RequireJS

    如何使用 requirejs 导入 recaptcha 我已经尝试了几件事 但没有任何效果 我需要这样做 以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它 require config paths recaptcha http