順便貼出來(lái)iframe的資料:
縱觀(guān)時(shí)下網(wǎng)站,本來(lái)網(wǎng)速就有些慢,可是幾乎每頁(yè)都要放什么Banner,欄目圖片,版權等一大堆雷同
的東西,當然,出于網(wǎng)站風(fēng)格統一、廣告效應的需要,本無(wú)可厚非,可畢竟讓用戶(hù)的錢(qián)包為這些“點(diǎn)綴
“的東西”日益消得錢(qián)憔悴”了,有沒(méi)有辦法,讓這些雷同的東西一次下載后就不用再下載,而只下載那
些內容有變化區域的網(wǎng)頁(yè)內容呢?
答案很肯定:應用Iframe標記!
一、Iframe標記的使用
提起Iframe,可能你早已將之扔到“被遺忘的角落”了,不過(guò),說(shuō)起其兄弟Frame就不會(huì )陌生了。
Frame標記即幀標記,我們所說(shuō)的多幀結構就是在一個(gè)瀏覽器窗口中顯示多個(gè)HTML文件?,F在,我們遇到一種很現實(shí)的情況:如有一個(gè)教程,是一節一節地上,每頁(yè)末尾做一個(gè)“上一節“、“下一節“的鏈
接,除了每節教程內容不同之外,頁(yè)面其它部分內容都是相同的,如果一頁(yè)一頁(yè)地做笨頁(yè)面,這似乎
太讓人厭煩了,這時(shí)突發(fā)奇想,如果有一種方法讓頁(yè)面其它地方不變,只將教程做成一頁(yè)一頁(yè)的內容
頁(yè),不含其它內容,在點(diǎn)擊上下翻頁(yè)鏈接時(shí),只改變教程內容部分,其它保持不變,這樣,一是省
時(shí),另則以后如教程有個(gè)三長(cháng)兩短的變動(dòng),也很方便,不致于牽一發(fā)而動(dòng)全軍了;更重要的是將那些廣
告Banner、欄目列表、導航等幾乎每頁(yè)的都有的東西只下載一次后就不再下載了。
Iframe標記,又叫浮動(dòng)幀標記,你可以用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示。它不同于Frame標記最大的特征即這個(gè)標記所引用的HTML文件不是與另外的HTML文件相互獨立顯示,而是可以直接嵌入在一個(gè)HTML文件中,與這個(gè)HTML文件內容相互融合,成為一個(gè)整體,另外,還可以多次在一個(gè)頁(yè)面內顯示同一內容,而不必重復寫(xiě)內容,一個(gè)形象的比喻即“畫(huà)中畫(huà)“電視。
現在我們談一下Iframe標記的使用。
Iframe標記的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
example.htm 是被嵌入的頁(yè)面,標簽 <IFRAME> 還有一些可用的參數設置如下:
marginwidth:網(wǎng)頁(yè)中內容在表格右側的預留寬度;例如:marginwidth="20",單位是 pix,下同。
marginheight:網(wǎng)頁(yè)中內容在表格頂部預留的高度;
hspace:網(wǎng)頁(yè)右上角的的橫坐標;
vspace:網(wǎng)頁(yè)右上角的縱坐標;
frameborder:是否顯示邊緣;填"1"表示"是",填"0"表示"否"
scrolling:是否出現滾動(dòng)條;填"1"表示"是",填"0"表示"否"
比如:
<Iframe src="
‘ target=_blank>http://netschool.cpcw.com/homepage" width="250" height="200& ... bsp;frameborder="0"></iframe> 二、父窗體與浮動(dòng)幀之間的相互控制
在腳本語(yǔ)言與對象層次中,包含Iframe的窗口我們稱(chēng)之為父窗體,而浮動(dòng)幀則稱(chēng)為子窗體,弄清
這兩者的關(guān)系很重要,因為要在父窗體中訪(fǎng)問(wèn)子窗體或相反都必須清楚對象層次,才能通過(guò)程序來(lái)訪(fǎng)問(wèn)并控制窗體。
1、在父窗體中訪(fǎng)問(wèn)并控制子窗體中的對象
在父窗體中,Iframe即子窗體是document對象的一個(gè)子對象,可以直接在腳本中訪(fǎng)問(wèn)子窗體中的對象。
現在就有一個(gè)問(wèn)題,即,我們怎樣來(lái)控制這個(gè)Iframe,這里需要講一下Iframe對象。當我們給這個(gè)標記設置了ID 屬性后,就可通過(guò)文檔對象模型DOM對Iframe所含的HTML進(jìn)行一系列控制。
比如在example.htm里嵌入test.htm文件,并控制test.htm里一些標記對象:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代碼為:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我們要改變ID號為myH1的H1標記里的文字為hello,my dear,則可用:
document.myH1.innerText="hello,my dear"(其中,document可省)
在example.htm文件中,Iframe標記對象所指的子窗體與一般的DHTML對象模型一致,對對象訪(fǎng)問(wèn)控制方式一樣,就不再贅述。
2、在子窗體中訪(fǎng)問(wèn)并控制父窗體中對象
在子窗體中我們可以通過(guò)其parent即父(雙親)對象來(lái)訪(fǎng)問(wèn)父窗口中的對象。
如example.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中訪(fǎng)問(wèn)ID號為myH2中的標題文字并將之改為"hello,my friend",我們就可以
這樣寫(xiě):
parent.myH2.innerText="hello,my friend"
這里parent對象就代表當前窗體(example.htm所在窗體),要在子窗體中訪(fǎng)問(wèn)父窗體中的對象,無(wú)一例外都通過(guò)parent對象來(lái)進(jìn)行。
Iframe雖然內嵌在另一個(gè)HTML文件中,但它保持相對的獨立,是一個(gè)“獨立王國“喲,在單一HTML中的特性同樣適用于浮動(dòng)幀中。
試想一下,通過(guò)Iframe標記,我們可將那些不變的內容以Iframe來(lái)表示,這樣,不必重復寫(xiě)相同的
內容,這有點(diǎn)象程序設計中的過(guò)程或函數,減省了多少繁瑣的手工勞動(dòng)!另外,至關(guān)重要的是,它使頁(yè)面的修改更為可行,因為,不必因為版式的調整而修改每個(gè)頁(yè)面,你只需修改一個(gè)父窗體的版式即可了。
有一點(diǎn)要注意,Nestscape瀏覽器不支持Iframe標記