javascript - IFrame 按钮点击事件

Question

我正在尝试将事件侦听器附加到 IFrame 中页面上按钮的“单击”事件。iframe 中的页面与父窗口属于同一个域。

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

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

注意：我发现了很多关于将点击事件添加到整个 iframe 的示例，但我不确定它对于 iframe 中的按钮是否同样有效。

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 满足相同的源策略时才有效。

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);
    }
}

Answer 3

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

                              ^

contentWindow属性。

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

Answer 4

您是否尝试过在“捕获”与“冒泡”阶段执行事件？

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

请注意，true而不是false作为最终参数。