Присоедините обработчик событий к HTML, отображаемому в IFrame

Question

Я работаю над созданием приложения реагирования, которое будет использоваться для просмотра различных типов файлов из известного источника. Пользователь выполнит поиск, будет представлен список результатов, а затем, щелкнув один из результатов, я извлечу файл и также хочу отобразить его на экране. Все эти файлы HTML / XML.

Кроме того, я хочу прикрепить обработчики событий к определенным тегам в самом файле. (ie. Присоединение слушателя onClick ко всем тегам <p>, например)

Очевидным ответом будет использование iframe, однако тогда обработчики событий станут проблемой. Использование dangerouslySetInnerHTML также работает, однако, если есть лучшее решение, я бы хотел узнать об этом. Есть идеи?

Answer 1

Вы можете запускать события из iframe и обрабатывать его по родительскому элементу, используя этот код

//iframe
function buttonClick() {
  parent.$(parent.document).trigger('eventhandler');
}
<button onclick="buttonClick()">Button</button>

//parent
 $(document).on('eventhandler', function () {
     alert('event fired');
 });

Просто добавьте обработчик событий в родительский файл и добавьте в него свои логики c, а затем добавьте событие вызвать в дочернем файле iframe или вы также можете перейти по этой ссылке .