Не срабатывает перехватчик события в iframe в Chrome

205

12 декабря 2017, 21:20

var iframe = document.createElement('iframe');
document.body.insertBefore(iframe, document.body.firstChild);
iframe.addEventListener('load', function () {
  document.body.style.overflow = 'hidden'; //блокируем скролл исходной страницы
  var iframeDoc = this.contentWindow.document;
  iframeDoc.body.classList.add('modal');
  iframeDoc.addEventListener('click', function (event) {
    var  event = event || window.event,
      closeBtn = iframeDoc.getElementById('closeBtn'),
       backBtn = iframeDoc.getElementById('backUrl');
    if ((event.target == closeBtn) || (event.target == backBtn)) {
      document.body.removeChild(iframe); //По кнопке закрытия удаляем айфрейм из DOM-дерева
      document.body.removeAttribute('style'); //и разблокировываем исходную страницу
    }
  });
});

Подскажите, пожалуйста, что я делаю не так. В ФФ, опере, даже в 10 IE срабатывает закрытие айфрейма по кнопке, а в chrome не срабатывает.

Answer 1

Проблема решилась перевешиванием обработчиков клика на сами элементы.

var iframeDoc = this.contentWindow.document,
     closeBtn = iframeDoc.getElementById('closeBtn'),
      backBtn = iframeDoc.getElementById('backUrl');
  iframeDoc.body.classList.add('modal');
  closeBtn.addEventListener('click', closeModal);
   backBtn.addEventListener('click', closeModal);
});
function closeModal() {
  document.body.removeChild(iframe); //По кнопке закрытия удаляем айфрейм из DOM-дерева
  document.body.removeAttribute('style'); //и разблокировываем исходную страницу
}