iFrame：使用 jQuery 将点击事件添加到按钮

Question

我正在做一个简短的测验，它将在 HTML 和 JavaScript/jQuery 中使用 iFrame 构建。我一直在试图弄清楚为什么我的按钮和 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

我知道这是用 "old" JS 编写的，但我使用的是旧后端。

我以前没有真正使用过 iFrame。任何人都可以就为什么这不起作用提出一些建议吗？

Answer 1

试试这个 $iframe.contents()[0].getElementById("dog").addEventListener("click", function() { getDog() });

但这只适用于同一域中托管的 iframe。

Answer 2

您需要在 Iframe 内容中找到狗按钮，就像附加按钮一样。

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

注意：如前所述，它不适用于 CORS (cross-origin)。仅当 iframe URL 在同一个域中时有效

iFrame：使用 jQuery 将点击事件添加到按钮

iFrame: using jQuery to add click event to button

html

iframe

jquery

click

button