【学习】如何用jQuery获取iframe中的元素

时间:2023-03-09 03:45:06
【学习】如何用jQuery获取iframe中的元素

(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出。)

说实在的,以前真的很少用到iframe,可最近公司把主要精力放在了研发后台系统上,所以iframe的出场就高了。今天写一个小知识,如何获取iframe中的元素。js原生方法我就不写了,毕竟还是对jquery情有独钟,用到的是contents()方法,请看官方解释:http://www.w3school.com.cn/jquery/traversing_contents.asp

【学习】如何用jQuery获取iframe中的元素

所以说,用contents()是一定能获取到iframe中的元素的,但是必须在同一个域,这里就引出“跨域”的问题,以下是百度出来的知识点:

什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

【学习】如何用jQuery获取iframe中的元素

详细请查看这篇文章:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

所以呢,我们在主页面去访问iframe中的元素,给其加一个js事件,是不起作用的。写一个最最简单的alert弹出,在页面中,有一个iframe,其src为a.html,在a.html中有一个按钮,class起名btn。在主页面中写上如下js代码:

$(function(){

var btn=$(this).contents().find(".btn");

btn.click(function(){

alert(1);

});

});

这时点击这个按钮,是没有任何反应的(实例请点击查看)。

所以,要修改,给iframe加一个load()即可:

$(function(){

$(".my-iframe").load(function(){

var btn=$(this).contents().find(".btn");

btn.click(function(){

alert(1);

});

});

});

加load后的实例查看

还有一点要注意,如果iframe中没有引入jquery库文件,那么在主页面中引入的库文件,一定在放在iframe之前,放其之后是不起作用的。而如果iframe中也引入了jquery库文件,则主页面中的库文件放在任何位置都可以了。

好了,今天只写这一个小问题吧,关于iframe还有很多麻烦的事情,改天再总结一下其他的。