从g-recaptcha标记中的reCAPTCHA v2中获取widgetId？

Question

嗨，这是我第一次尝试在此处发布问题。

我想知道是否可以从g-recaptcha标签而不是从reCAPTCHA v2的grecaptcha.render（）的返回值中获取widgetId。

这是因为我有2个不同的脚本来处理同一页面上的每2个表单。我希望能够分别重置reCAPTCHA。

每个脚本都有自己的onload回调，应该获取自己的widgetId。但这是行不通的，因为似乎Google reCAPTCHA代码的url参数只能调用1个onload回调函数。

我无法将多个onload回调函数设置为recaptcha源url，如下所示。

“ https://www.google.com/recaptcha/api.js？onload = onloadCallback1，onloadCallback2＆render = onload”

“ https://www.google.com/recaptcha/api.js？onload [] = onloadCallback1＆onload [] = onloadCallback2＆render = onload”

所以我想也许我可以在加载后从g-recaptcha标记中获取小部件ID ...

任何想法或解决方案？

Answer 1

嗯，，虽然不复杂，但是我想出了一个根据g-recapctha类的顺序获取小部件ID的想法。该函数将目标Recaptcha框的ID用作参数，并返回与之关联的g-recaptcha类的索引。

// recaptha box 1
<div id="recaptchaBox-1" class="g-recaptcha" data-sitekey="xxx"></div>
<input id="resetBtn1" type="button" value="Reset1">

// recaptha box 2    
<div id="recaptchaBox-2" class="g-recaptcha" data-sitekey="xxx"></div>
<input id="resetBtn2" type="button" value="Reset2">

/**
 * Returns widgetId from a given element id
 * @param {string} elementId 
 * @return {number} i
 */
function getWidgetId(elementId) {
  const recaptchaBoxes = document.querySelectorAll('.g-recaptcha');
  const targetBox = document.querySelector(`#${elementId}`);
  for (let i = 0; i < recaptchaBoxes.length; i++) {
    if (recaptchaBoxes[i].id === targetBox.id) {
      return i;
    }
  }
}

// Get the widgetId for each boxes.
const widgetId1 = getWidgetId('recaptchaBox-1');
const widgetId2 = getWidgetId('recaptchaBox-2');

// Assign grecaptcha.reset() for each buttons on click event.
document.getElementById('resetBtn-1').addEventListener('click', () => grecaptcha.reset(widgetId1));
document.getElementById('resetBtn-2').addEventListener('click', () => grecaptcha.reset(widgetId2));

Answer 2

问题是如何具有2个回调？怎么样：“ ... onload = twoCallbacks”

function twoCallbacks(...args){
  callback1(...args)
  callback2(...args)
}