jquery iframe 主体选择器

Question

是否有使用 jquery 访问 iframe 主体的简单表达式。假设 iframe 的 id 是 theframe。

我想给 iframe 提供事件处理程序。例如，

$("#theframe").contents().find("body").click(function() {
    alert("hello, you touched me~");
});

但是，这段代码在 IE 中不起作用。

任何替代想法帮帮我吧~

Answer 1

为 iframe 元素指定一个名称属性。现在您可以像这样引用它:

window.name_of_iframe

您的 iframe 可能没有 jQuery，因此使用标准遍历是更安全的方法

iframe_body = window.name_of_iframe.document.getElementsByTagName("body")[0];

这将是 iframe 中的 body 元素。然而，这可以通过主页上的 jQuery 使用，因此:

$(window.name_of_iframe.document.getElementsByTagName("body")[0]);

是 iframe 的 body 元素的 jQuery 包装器。

只有在加载 iframe 时才小心执行此操作:

$("iframe[name=name_of_iframe]").load(function() {
    var iframe_body = window.name_of_iframe.document.getElementsByTagName("body")[0];
    $(iframe_body).click(function() {
        alert("hello, you touched me~");
    });
});

<小时/>

更新:在 IE 中对其进行了测试，并且存在相当奇怪的行为。在 Firefox 中，您必须将其包装在文档就绪事件内，但在 IE 中，它必须位于外部，就在 iframe 元素之后。该版本也适用于 IE 和 Firefox。

<iframe name="ifr" src="?if=1"></iframe>
<script type="text/javascript">
var ifr_loaded = false;
$("iframe").load(function() {
    $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("s"); });
    ifr_loaded = true;
});
$(function() {
    if (!ifr_loaded)
    {
        $("iframe").load(function() {
            $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("d"); });
        });
    }
});
</script>

<小时/>

更新2:一个较短的版本，但它有它的缺点，你必须在javascript中指定iframe的来源，但它适用于我尝试过的所有浏览器。

<iframe name="ifr"></iframe>
<script type="text/javascript">
$(function() {
    $("iframe").load(function() {
        $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("d"); });
    }).attr("src","/teszt/v/index.php?if=1");
});
</script>

<小时/>

更新3:还有一个更简单的结束方式:

<script type="text/javascript">
function init_iframe(obj) {
    $(obj.document.getElementsByTagName("body")[0]).click(function() { alert("d"); });
}
</script>
<iframe name="ifr" src="?if=1" onload="init_iframe(window.ifr);"></iframe>