Question

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

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

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

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

任何其他想法帮帮我〜

Answer 1

为iframe元素指定name属性。现在您可以像这样引用它：

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

UPDATE：在IE中测试了它，并且它有一个相当的starnge行为。在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>

jquery iframe体选择器

1 个答案: