页面加载时Google reCAPTCHA不显示，刷新后正常的解决求助

看起来你遇到的是Angular vcRecaptcha 组件和reCAPTCHA API加载时序不匹配的问题——首次加载时API还没准备好，组件就已经完成初始化，导致渲染失败；刷新时API可能已经被浏览器缓存，所以能正常加载。下面是具体的解决步骤：

问题根源 #

你当前直接加载了reCAPTCHA的基础API脚本，没有配合vcRecaptcha要求的显式加载模式。这个组件需要等待reCAPTCHA API完全加载完成后再初始化，否则会因为API未就绪而无法渲染控件。另外你添加的$(window).load自动刷新是临时 workaround，我们可以彻底解决这个问题。

具体解决方案 #

1. 修正reCAPTCHA API的加载方式 #

把你当前的reCAPTCHA脚本引用替换成显式加载版本，指定onload回调和render=explicit参数：

<script src="//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>

这个vcRecaptchaApiLoaded回调是vcRecaptcha组件内置的，用来通知组件API已就绪，可以开始渲染控件了。

2. 移除自动刷新的冗余代码 #

删掉这段临时刷新的脚本，它不是根本解决办法：

<script>
  $(window).load(function () {
    window.location.href=window.location.href
  });
</script>

3. 确认脚本加载顺序 #

确保你的脚本加载顺序正确，遵循以下顺序：

• 先加载Angular核心库
• 再加载angular-recaptcha.js（注意你原代码里的文件名拼写有误，是recaptcha不是rechapcha，如果文件名不对要修正）
• 最后加载你的app.js
• reCAPTCHA的API脚本放在Angular之后、组件脚本前后都可以，因为它是异步加载的

4. 修正代码中的小细节 #

你的控制器里变量名有笔误：respone1和respone2应该是response1和response2，虽然不影响控件显示，但会影响后续获取验证响应，建议修正：

var app = angular.module('plunker', ['vcRecaptcha']);
app.controller('MainCtrl', function($scope ) {
  $scope.name = 'World';
  $scope.response1 = ''; // 修正拼写
  $scope.response2 = ''; // 修正拼写
});

对应的HTML模板里也要同步修改：

<div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="response1"></div>
<pre>response1 = {{response1 | json}}</pre>
<pre>response2 = {{response2 | json}}</pre>

完整修正后的代码示例 #

HTML部分 #

<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link href="style.css" rel="stylesheet" />
  <!-- 使用显式加载的reCAPTCHA API -->
  <script src="//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
  <script src="angular.js"></script>
  <script src="angular-recaptcha.js"></script> <!-- 修正文件名拼写 -->
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="response1"></div>
  <!-- <div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="response2"></div> -->
  <pre>response1 = {{response1 | json}}</pre>
  <pre>response2 = {{response2 | json}}</pre>
</body>
</html>

JS部分（app.js） #

var app = angular.module('plunker', ['vcRecaptcha']);
app.controller('MainCtrl', function($scope ) {
  $scope.name = 'World';
  $scope.response1 = '';
  $scope.response2 = '';
});

这样修改后，reCAPTCHA控件会在API完全加载后再由vcRecaptcha组件初始化，首次加载就能正常显示，不需要手动刷新了。

内容的提问来源于stack exchange，提问作者shami sheikh