【學習】如何用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還有不少麻煩的事情，改天再總結一下其餘的。