Рендеринг reCaptcha v2 в IE: две формы на странице

481

24 июля 2017, 16:35

Здравствуйте.

<!DOCTYPE html>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

прописаны

На странице выводится сразу две формы обратной связи (разные, id тоже разные), капча от гугл.

Реализовал таким образом (нашёл, в инете и тут разные варианты, но принцип тот же везде): в head

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

Перед закрывающим тегом body в общем файле с другими скриптами

var CaptchaCallback = function() {
  $('.form-captcha').each(function(index, el) {
      grecaptcha.render(el, {'sitekey' : 'ключ'});
    });
};

В разметке, в каждой форме есть блок с классом form-captcha, блоки имеют разные id. Нормальные браузеры отрабатывают без проблем. IE (11, хотя тестил эмуляцию, разницы нет) рендерит капчу через раз, ctrl+F5 исправляет ситуацию, но до следующего открывания стр.

Если включить отладчик, всунуть туда этот js и запустить, результатом будет undefined. Если запустить через отладчик вот так:

$('.form-captcha').each(function(index, el) {
      grecaptcha.render(el, {'sitekey' : 'ключ'});
    });

То капчи загружаются. Я так предположил, что верхняя строчка и скрипт не цепляются друг за друга из-за разной времени загрузки, хотя defer для того и вписан, чтобы исполнить скрипт после полной загрузки стр.

Попробовал убрать async defer и вообще эту строку убрать в подвал, под вызовом файла со скриптами и функцией рендеринга. Проблема ушла, но теперь, через раз в IE в отладчике выскакивают ошибки: SCRIPT5: Отказано в доступе. Файл: anchor, строка: 1, столбец: 1

Собственно ругань на файл капчи, ctrl+F5 исправляет ошибку, но что-то тут не так.

Что не так происходит, как исправить и сделать правильно?