在Web開(kāi)發(fā)中,頁(yè)面中經(jīng)常會(huì)使用iframe元素來(lái)展示其他網(wǎng)頁(yè)或文檔。而使用jQuery可以很方便地訪問(wèn)和操作iframe元素,包括多個(gè)iframe標(biāo)簽。
使用jQuery可以輕松地遍歷iframe元素,例如:
$('iframe').each(function(){ //執(zhí)行操作 });
這個(gè)代碼會(huì)選中頁(yè)面中所有的iframe元素,并且對(duì)于每一個(gè)iframe元素都會(huì)執(zhí)行一遍函數(shù)體中的操作。
當(dāng)我們需要使用多個(gè)iframe元素時(shí),可以給每一個(gè)iframe標(biāo)簽設(shè)置一個(gè)唯一的ID,例如:
<iframe id="iframe-1" src="http://www.example.com"></iframe> <iframe id="iframe-2" src="http://www.example2.com"></iframe>
然后,我們可以使用以下代碼來(lái)選中某一個(gè)特定的iframe元素:
$('#iframe-1').contents().find('body').html('這是新的內(nèi)容');
以上代碼會(huì)選中ID為“iframe-1”的iframe元素,并且將其內(nèi)部的body元素的HTML內(nèi)容設(shè)置為“這是新的內(nèi)容”。
使用jQuery可以很方便地在多個(gè)iframe元素之間進(jìn)行切換,例如:
$('.tab').click(function(){ // 將所有iframe元素隱藏 $('iframe').hide(); // 顯示特定的iframe元素 $('#' + $(this).attr('rel')).show(); });
以上代碼會(huì)選中頁(yè)面中所有的.tab元素,并且為每一個(gè)元素添加一個(gè)點(diǎn)擊事件。當(dāng)點(diǎn)擊某一個(gè).tab元素時(shí),它所對(duì)應(yīng)的iframe元素會(huì)被顯示出來(lái),而其他的iframe元素則會(huì)被隱藏。