如何向 iframe 中的 p 元素添加点击事件（使用 jQuery）答案

【问题标题】：How to add a click event to p elements in iframe (using jQuery)如何向 iframe 中的 p 元素添加点击事件（使用 jQuery）
【发布时间】：2010-09-14 12:45:42
【问题描述】：

如何向 iframe 中的<p> 元素添加点击事件（使用 jQuery）

<iframe frameborder="0" id="oframe" src="iframe.html" width="100%" name="oframe">

【问题讨论】：

Define an event on iFrame element with jQuery 的可能重复项
您是否尝试在不向 iframe 中的内容添加任何代码的情况下执行此操作？

标签： javascript jquery events iframe

【解决方案1】：

有一个特殊的 jQuery 函数可以做到这一点：.contents()。请参阅示例以了解其工作原理。

【讨论】：

谢谢，$('#iframe').contents().find('p').click()

【解决方案2】：

最好的办法是调用 iframe，只要它是您域的一部分。

iframe.html

<html>
    <head>
        <script>
            window.MyMethod = function()
            {
                $('p').click();
            }
        </script>
    </head>
    <body></body>
</html>

然后使用

document.getElementById('targetFrame').contentWindow.MyMethod();

调用该函数。

另一种方法是通过window.frames 访问iframe。

<iframe name="myIframe" src="iframe.html"/>

和javascript

child_frame = window.frames['myIframe'].document;
$('p',child_frame).click(function(){
    alert('This click as bound via the parent frame')
});

应该没问题。

【讨论】：

【解决方案3】：

想要添加这个，作为一个完整的复制粘贴解决方案（适用于 Firefox 和 Chrome）。有时很容易忘记在文档之后调用事件，因此 iframe 已完全加载：

$('#iframe').on('load', function() {
    $('#iframe').contents().find('#div-in-iframe').click(function() {
        // ...
    });
});

iframe 必须在同一个域中才能正常工作。

【讨论】：

【解决方案4】：

通过引用 IFrame 文档作为 jQuery 的第二个参数，即上下文：

jQuery("p", document.frames["oframe"].document).click(...);

【讨论】：

【解决方案5】：

要从 iframe 中访问任何元素，一个简单的 JavaScript 方法如下：

var iframe = document.getElementById("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow;
// Get HTML element
var iframeHtml = iframeDoc.getElementsByTagName("html")[0];

现在您可以使用此 html 元素选择任何元素

iframeHtml.getElementById("someElement");

现在，您可以将任何您想要的事件绑定到此元素。希望这可以帮助。抱歉英文不正确。

【讨论】：