在刷新页面之前，Recaptcha 不会呈现
我在我的 Angular js 项目中使用 Recaptcha 来实现安全性。 我刚刚通过以下步骤实现了验证码： 1.我将以下链接添加到我的页面（在每个样式和脚本文件之前的 head 标签中）：
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
2.在我的表单中，我添加了验证码
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
所以我的页面是这样的
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
显然，一切都很好，但 Recaptcha 直到我刷新页面才呈现。实际上，当页面通过ajax请求时它不会工作，但页面重新加载后，Recaptcha将呈现在页面上！
那么如何使用第一次渲染来渲染 Recaptcha？
我知道如何解决这个问题。 而不是添加这个脚本
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
对于布局页面，我将其添加到我想要渲染验证码的每个页面中，因此在路由到特殊页面之后，此外，渲染页面内容验证码也会为我们渲染。
例如，内容页面模板将是这样的：
contactus.html 内容
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async></script>
<form name="contactUsForm" novalidate>
<section class="well">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group has-feedback" ng-class="{'has-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'has-success': !contactUsForm.firstName.$error.required }">
<label class="control-label col-sm-4" for="firstName">Name</label>
<div class="col-sm-8 col-md-6">
<input type="text" id="firstName" name="firstName" ng-model="contactUs.firstName" class="form-control" ng-class="{'form-control-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'form-control-success': !contactUsForm.firstName.$error.required }" placeholder="Name" required />
<span ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="!contactUsForm.firstName.$error.required" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<div class="text-danger" ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty">Name is required</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-12 col-sm-offset-2" style="display: flex;justify-content: flex-start;margin-bottom: 2rem;">
<div class="g-recaptcha" data-sitekey="my-sitekey"></div> <!-- Server -->
<!--<div class="g-recaptcha" data-sitekey="my-sitekey"></div>--> <!-- Local -->
</div>
<div class="buttons-wrap col-sm-offset-2" style="text-align:right;padding-right:1.6rem">
<button class="btn btn-primary" ng-disabled="contactUsForm.$invalid" data-toggle="modal" data-target="#confirmModal"><i class="glyphicon glyphicon-save"></i><span>&submit</span></button>
</div>
</section>
</form>
reCAPTCHA 未渲染的主要原因是在 g-reCAPTCHA 回调触发之前未加载 DOM 内容。
我找到了一个更简单的解决方案。我没有让脚本加载调用渲染函数，而是手动运行回调。
在头部，输入以下内容
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
注意 onload 参数如何不存在。
现在，您可以从组件或控制器中手动调用全局回调函数。它将确保在函数触发之前加载组件或视图 DOM。