jquery iframe体选择器

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

更新:在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>