iFrame: использование jQuery для добавления события нажатия кнопки

Question

Я работаю над краткой викториной, которая будет построена с использованием iFrame в HTML и JavaScript / jQuery. Я пытался выяснить, почему мои кнопки и события onclick не работают.

Вот что у меня есть в HTML:

<iframe id="iframe">

</iframe>

И JS:

$(document).ready(function() {

  function getDog() {
    alert("Dogs are great!");
  }

      var $iframe = $('#iframe');
      var $dogButton = "<button id=\'dog\'>Dog</button>";

      $iframe.contents().find("body").append("What is your favorite animal?");
      $iframe.contents().find("body").append($dogButton);
      document.getElementById("dog").addEventListener("click", getDog());
    })

По какой-то причине это не будет работать во фрагменте, поэтому вот мой CodePen: https://codepen.io/anfperez/pen/agRVKE

Я знаю, что это написано на "старом" JS, но я работаю с устаревшим бэкэндом.

Я раньше не работал с iFrames. Кто-нибудь может дать несколько советов, почему это не сработает?

Answer 1

Вам нужно найти кнопку «Собака» внутри содержимого Iframe, как вы добавили кнопку.

$iframe.contents().find(".dog").addEventListener("click", getDog());

Примечание : Как уже говорилось, он не будет работать с CORS (кросс-источник). Работает только в том случае, если URL-адрес iframe находится в том же домене

Answer 2

Попробуйте это $iframe.contents()[0].getElementById("dog").addEventListener("click", function() { getDog() });

Но это работает только в iframes, размещенных в том же домене.