如何向 iframe 中的 p 元素添加點擊事件（使用 jQuery）

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

想要添加這個，作為一個完整的復制粘貼解決方案（適用於 Firefox 和 Chrome）。 有時很容易忘記在文檔之后調用事件，因此 iframe 已完全加載：

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

iframe 必須在同一個域中才能工作。

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

通過將 IFrame 文檔的引用作為 jQuery 的第二個參數，即上下文：

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

如何向 iframe 中的 p 元素添加點擊事件（使用 jQuery）

問題描述

5 個解決方案

解決方案1
12 已采納 2010-09-14 12:58:15

解決方案2
1 2010-09-14 12:52:48

解決方案3
1 2020-06-13 08:27:06

解決方案4
0 2015-03-20 11:47:47

解決方案5
0 2010-09-14 12:53:32

如何向 iframe 中的 p 元素添加點擊事件（使用 jQuery）

問題描述

5 個解決方案

解決方案1 12 已采納 2010-09-14 12:58:15

解決方案2 1 2010-09-14 12:52:48

解決方案3 1 2020-06-13 08:27:06

解決方案4 0 2015-03-20 11:47:47

解決方案5 0 2010-09-14 12:53:32

解決方案1
12 已采納 2010-09-14 12:58:15

解決方案2
1 2010-09-14 12:52:48

解決方案3
1 2020-06-13 08:27:06

解決方案4
0 2015-03-20 11:47:47

解決方案5
0 2010-09-14 12:53:32