Microsoft Edge提交表单时始终触发Invisible reCAPTCHA图片验证求助

我明白你现在的困扰：Invisible reCAPTCHA在Chrome里能正常隐形验证，一到Edge就每次提交都弹出图片验证，确实太影响用户体验了。结合你贴的代码，咱们来一步步排查和修复这个问题。

首先看代码里的明显问题 #

你写的onSubmitBtnClick函数有个小错误，window.grecaptcha.execute;只是引用了方法，没有实际调用，而且也没传入之前渲染的recaptchaId，这会导致Edge里的reCAPTCHA无法正确启动隐形验证流程，只能触发 fallback 的图片验证。

先把这个函数修正：

function onSubmitBtnClick () {
  // 必须调用execute方法并传入渲染时得到的recaptchaId
  window.grecaptcha.execute(recaptchaId);
}

优化表单与验证的绑定逻辑 #

Edge对事件触发和脚本执行的时机可能更敏感，建议调整表单提交的绑定方式，避免直接在按钮上写onclick，改用标准的表单提交事件监听：

修改后的HTML部分（移除按钮上的冗余属性）：

<form id="petitionForm">
  <input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
  <input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
  <input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
  <input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
  
  <!-- 移除按钮上的onclick、data-sitekey等属性，逻辑统一由JS控制 -->
  <input type="submit" name="login" class="g-2" id="signButton" value="Signer">
  <div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>
</form>

对应的JavaScript调整为监听表单提交事件，确保验证流程正确触发：

// 等待DOM完全加载后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('petitionForm');
  form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    window.grecaptcha.execute(recaptchaId); // 启动隐形reCAPTCHA验证
  });
});

window.onScriptLoad = function () {
  var htmlEl = document.querySelector('.g-recaptcha');
  var captchaOptions = {
    'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
    'size': 'invisible',
    'badge': 'inline',
    callback: window.onUserVerified
  };
  var inheritFromDataAttr = true;
  // 把recaptchaId存到全局，方便后续调用execute
  window.recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};

window.onUserVerified = function (token) {
  $.ajax({
    url: 'process.php',
    type: 'post',
    dataType: 'json',
    data : {
      'lastname' : $("#lastnameField").val(),
      'firstname' : $("#firstnameField").val(),
      'city' : $("#cityField").val(),
      'postalCode' : $("#postalcodeField").val(),
      'g-recaptcha-response' : token
    },
    success:function(data) {
      // 这里可以替换成更友好的用户提示，比如更新页面元素
      alert('表单已成功提交！');
    },
    error: function(xhr, textStatus, error){
      // 提示用户服务器端处理异常
      alert('提交失败，请稍后重试。');
    }
  });
};

额外的排查建议 #

1. 检查Edge隐私设置：Edge的严格跟踪保护可能会阻止reCAPTCHA收集用户行为数据，导致它无法判断你是人类，只能触发图片验证。可以建议测试用户暂时放宽跟踪保护，或者在网站上添加提示说明。
2. 确认reCAPTCHA配置：检查你的站点密钥是否正确，并且已经将网站域名完整添加到reCAPTCHA控制台的允许列表中（Edge对域名匹配的规则可能更严格）。
3. 更新API脚本版本：尝试使用明确指定版本的reCAPTCHA脚本链接，比如https://www.google.com/recaptcha/api.js?v=v2&render=explicit&onload=onScriptLoad，避免使用未指定版本的脚本可能带来的兼容性问题。

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