在項目開發中,經常會遇到需要嵌入iframe的場景,但是由于iframe是一個獨立的頁面,需要在里面獲取元素時會比較麻煩。下面就來介紹一下如何使用jQuery選擇iframe里面的div。
//假設我們有一個嵌入iframe的頁面: <iframe src="http://www.example.com" id="myFrame" width="600" height="400"></iframe> //要選擇iframe里面的div,需要先獲取到iframe元素 var myFrame = document.getElementById('myFrame'); var frameDoc = myFrame.contentDocument || myFrame.contentWindow.document; //獲取到iframe里面的div元素 var ifmDiv = $(frameDoc).find('div');
上面的代碼中,我們首先通過document.getElementById()方法獲取到iframe元素,然后通過contentDocument或contentWindow.document獲取到iframe里面的document對象。接著使用jQuery的find()方法查找div元素。需要注意的是,由于iframe里面的元素是另外一個頁面的元素,所以需要將獲取到的document對象傳遞給jQuery對象。
如果iframe里面的div具有唯一的ID屬性,我們也可以直接使用ID選擇器來選擇這個元素:
var ifmDiv = $('#myFrame').contents().find('#divId');
上面的代碼中,我們使用了contents()方法來獲取到iframe元素的內容,然后使用ID選擇器查找div元素。
總之,使用jQuery選擇iframe里面的元素并不復雜,只需要先獲取到iframe元素,再通過document對象或者contents()方法來獲取到iframe里面的內容,并使用常規的選擇器進行查找即可。
上一篇css開頭取消默認屬性
下一篇css幻燈片效果'