IFrame按钮点击事件

Question

我正在尝试将事件监听器附加到IFrame页面上的按钮的“click”事件。IFrame中的页面属于与父窗口相同的域。

window.frames["iframe_Id"].document.getElementById("button_id").addEventListener("click",functionToRun,false);

上面的示例对我不起作用。这可能只是我的实际代码中的语法错误，但我想看看这是否是一般想法。

注意：我找到了许多关于将点击事件添加到整个Iframe的示例，但我不确定它是否对Iframe内的按钮起作用。

- Usman Mutawakil

---

在哪个浏览器上无法工作？框架文档可能会很棘手。 - Ben Mosher

Chrome。但是当我在测试时，我可以获取Iframe内部元素的“innerHTML”组件，所以我的直觉告诉我这不是浏览器的问题，而更多是我自己的问题。 - Usman Mutawakil

有趣。这表明问题不在于找到按钮（目前的答案试图纠正），而在于分配/执行处理程序... - Ben Mosher

在声明和引用functionToRun时再次检查拼写永远不会有错，那样做是明智的。;-) - Ben Mosher

Answer 1

使用jQuery：

$("#iframe_Id").contents("#button_id").click(functionToRun);

或者不使用jQuery:

document.getElementById("iframe_Id").contentWindow.document.getElementById("button_id").addEventListener("click", functionToRun, false);

只有当iframe遵循同源策略才能确保此方法有效。

- PitaJ

Answer 2

window.frames是一个类似数组的对象，因此只能通过索引访问其元素。

您应该循环遍历它们，并检查它们的id，例如：

var frame; for(i = 0; i < frames.length; i++) {
    frame = frames[i];
    if (frame.id === 'iframe_id') {
         frame.document
              .getElementById("button_id")
              .addEventListener("click",functionToRun,false);
    }
}

- tpolyak

Answer 3

window.frames["iframe_Id"].contentWindow.document.getElementById("button_id").addEventListener("click",functionToRun,false);

                              ^

contentWindow 属性。

通过 contentWindow 属性，从 DOM iframe 元素中，脚本可以访问包含 HTML 页面的窗口对象。

- Anirudh Ramanathan

---

那个参考页面非常简陋... 哈哈。 - Ben Mosher

Answer 4

你尝试过在"捕获" vs. "冒泡"阶段执行事件吗？

document.getElementById("iframe_Id")
 .document.addEventListener("click", functionToRun, true);

请注意，将最后一个参数设为true而不是false。

- Ben Mosher

---

是的，同样的结果。我可以获取<button>元素内的数据，但我猜问题肯定在事件注册周围。我还在继续查看它。 - Usman Mutawakil