【学习】如何用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还有很多麻烦的事情，改天再总结一下其他的。