recaptcha__en.js:161 Uncaught TypeError: Cannot read property 'postMessage' of null

[crobinson42]

Hi all,
I'm experiencing the following error on callback:

recaptcha__en.js:161 Uncaught TypeError: Cannot read property 'postMessage' of null

I have 1 recaptchas on my page and both point to the same callback which simply hides the recaptcha containers ($el.hide(), does not remove anything). The error only appears when interacting with the second recaptcha (support-contact-form).

Screenshare:
http://recordit.co/hjkJe4GNDl

Code:

var recaptchaEmail;
var recaptchaContactForm;
var myCallBack = function() {
//Render the recaptchaEmail on the element with ID "recaptcha-email"
recaptchaEmail = grecaptcha.render('recaptcha-email', {
  'sitekey' : 'xxxxxx',
  'theme' : 'dark',
  'callback' : recaptchaCallback,
});

//Render the recaptchaContactForm on the element with ID "recaptcha-contact-form"
recaptchaContactForm = grecaptcha.render('recaptcha-contact-form', {
  'sitekey' : 'xxxxxx',
  'theme' : 'dark',
  'callback' : recaptchaCallback,
});

var recaptchaCallback = function(e) {
  // remove recaptcha
  $('div.g-recaptcha').hide();

  showEmail();
  showSubmitForm();
};

// show email address
var showEmail = function() {
  var emailLink = $('<a href="mailto:[email protected]?Subject=THERMS - Support" target="_top">[email protected]</a>')
  $('#emailContainer').html(emailLink);
};

// show submit contact form button
var showSubmitForm = function() {
  var submitButton = $('<button class="btn btn-primary" id="submitContactusForm">Submit</button>');
  $('#submitContactButtonContainer').html(submitButton);
};

[skipjack]

+1 ... I'm seeing the same error

[kakutuzov]

got same problem.
use several captcha controls. init like

`(function (w) {
var captchaValidateCallback = function (elem, response) {
console.log(elem);
console.log(response);
}
var captchaWidgets = [];
var captchaInstances = $('[captcha]');
w.isCaptchaLoaded = false;
w.onJsCaptchaLoad = function () {
captchaInstances.addClass('g-recaptcha');
for (var i = 0; i < captchaInstances.length; i++) {
var id = captchaInstances[i].id;
var widget = grecaptcha.render(id, {
sitekey: '',
theme: 'light', //'dark'
callback: function (response) {
captchaValidateCallback(this, response);
}.bind(captchaInstances[i])
});
captchaWidgets.push(widget);
}
}
if (captchaInstances.length && !w.isCaptchaLoaded) {
w.isCaptchaLoaded = true;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.defer = true;
s.src = 'https://www.google.com/recaptcha/api.js?onload=onJsCaptchaLoad&render=explicit&hl=ru';//todo property
document.body.appendChild(s);

}

})(window);`

[iamaleko]

The problem occurs in case of hiding recaptcha's container in recaptchaCallback function (recaptcha can't get contentWindow of hidden frame to send postMessage). Use deferred hiding and all will be fine:
setTimeout(function() { $('div.g-recaptcha').hide(); }, 0);

[rowan-m]

Closing super old issues. Please re-raise if there's still a problem for you here.