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

我知道这是用“旧” JS编写的，但是我正在使用旧版后端。

我以前从未真正使用过iFrame。谁能给我一些建议，为什么这不起作用？

Answer 1

您需要在iframe内容中找到狗按钮，就像您已添加按钮一样。

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

注意：如上所述，它不适用于CORS（跨域）。仅在iframe网址位于同一域中时有效

Answer 2

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

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

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

2 个答案: