Question

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

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

Answer 1

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

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

这应该可以正常工作。

Answer 3

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

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

Answer 4

要访问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");

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

Answer 5

希望将其添加为完整的复制粘贴解决方案（可在Firefox和Chrome上使用）。有时很容易忘记记住在文档之后调用该事件，因此iframe已完全加载：

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

iframe必须位于同一域上，这样才能正常工作。

如何在iframe中的p元素中添加click事件（使用jQuery）

5 个答案: