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

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

 

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

因此说，用contents()是必定能获取到iframe中的元素的，可是必须在同一个域，这里就引出“跨域”的问题，如下是百度出来的知识点：

什么是跨域，简单地理解就是由于JavaScript同源策略的限制，a.com 域名下的js没法操做b.com或是c.a.com域名下的对象。

详细请查看这篇文章：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还有不少麻烦的事情，改天再总结一下其余的。