iframe是框架的一種形式，也比較常用到,下面是對其在平時常用到屬性的總結
Iframe用法,下面是一個常規(guī)的列子
<iframe?border=2?frameborder=0?width=500?height=500?marginheight=0?marginwidth=0?scrolling=no?src="move-ad.html">
</iframe>
其中:
iframe用于設置文本或圖形的浮動圖文框或容器。?
border設定圍繞圖文框的邊緣寬度?
????其中還有快讀高度的設計
scrolling=no?是否有滾動條（YES,NO,AUTO)?
SRC?指定IFRAME調(diào)用的文件或圖片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)?
?
一、Iframe標記的使用?
提起Iframe，可能你早已將之扔到“被遺忘的角落”了，不過，說起其兄弟Frame就不會陌生了。Frame標記即幀標記，我們所說的多幀結構就是在一個瀏覽器窗口中顯示多個HTML文件。現(xiàn)在，我們遇到一種很現(xiàn)實的情況：如有一個教程，是一節(jié)一節(jié)地上，每頁末尾做一個“上一節(jié)“、“下一節(jié)“的鏈接，除了每節(jié)教程內(nèi)容不同之外，頁面其它部分內(nèi)容都是相同的，如果一頁一頁地做笨頁面，這似乎太讓人厭煩了，這時突發(fā)奇想，如果有一種方法讓頁面其它地方不變，只將教程做成一頁一頁的內(nèi)容頁，不含其它內(nèi)容，在點擊上下翻頁鏈接時，只改變教程內(nèi)容部分，其它保持不變，這樣，一是省時，另則以后如教程有個三長兩短的變動，也很方便，不致于牽一發(fā)而動全軍了;更重要的是將那些廣告Banner、欄目列表、導航等幾乎每頁的都有的東西只下載一次后就不再下載了。 Iframe標記，又叫浮動幀標記，你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同于Frame標記最大的特征即這個標記所引用的 HTML文件不是與另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內(nèi)容相互融合，成為一個整體，另外，還可以多次在一個頁面內(nèi)顯示同一內(nèi)容，而不必重復寫內(nèi)容，一個形象的比喻即“畫中畫“電視。?
現(xiàn)在我們談一下Iframe標記的使用。?
Iframe標記的使用格式是:?
<Iframe?src="URL"?width="x"?height="x"?scrolling="[OPTION]"?frameborder="x"></iframe>
src：文件的路徑，既可是HTML文件，也可以是文本、ASP等；?
width、height：”畫中畫”區(qū)域的寬與高；?
scrolling:當SRC的指定的HTML文件在指定的區(qū)域不顯不完時，滾動選項，如果設置為NO，則不出現(xiàn)滾動條；如為Auto：則自動出現(xiàn)滾動條；如為Yes，則顯示;?
FrameBorder：區(qū)域邊框的寬度，為了讓“畫中畫“與鄰近的內(nèi)容相融合，常設置為0。?
比如:?
<Iframe?src="http://www.jb51.net";;?width="250"?height="200"?scrolling="no"?frameborder="0"></iframe>
?
二、父窗體與浮動幀之間的相互控制 在腳本語言與對象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動幀則稱為子窗體，弄清這兩者的關系很重要，因為要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能通過程序來訪問并控制窗體。?
1、在父窗體中訪問并控制子窗體中的對象?
在父窗體中，Iframe即子窗體是document對象的一個子對象，可以直接在腳本中訪問子窗體中的對象。?
現(xiàn)在就有一個問題，即，我們怎樣來控制這個Iframe，這里需要講一下Iframe對象。當我們給這個標記設置了ID 屬性后，就可通過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。?
比如在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對象模型一致，對對象訪問控制方式一樣，就不再贅述。?
2 、在子窗體中訪問并控制父窗體中對象?
在子窗體中我們可以通過其parent即父（雙親）對象來訪問父窗口中的對象。?
如example.htm：?
<html>?
<body?οnclick="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中訪問ID號為myH2中的標題文字并將之改為”hello,my friend”，我們就可以這樣寫：?
parent.myH2.innerText="hello,my?friend"
這里parent對象就代表當前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對象，無一例外都通過parent對象來進行。?
Iframe雖然內(nèi)嵌在另一個HTML文件中，但它保持相對的獨立，是一個“獨立王國“喲，在單一HTML中的特性同樣適用于浮動幀中。?
試想一下，通過Iframe標記，我們可將那些不變的內(nèi)容以Iframe來表示，這樣，不必重復寫相同的內(nèi)容，這有點象程序設計中的過程或函數(shù)，減省了多少繁瑣的手工勞動！另外，至關重要的是，它使頁面的修改更為可行，因為，不必因為版式的調(diào)整而修改每個頁面，你只需修改一個父窗體的版式即可了。?
有一點要注意，Nestscape瀏覽器不支持Iframe標記，但在時下IE的天下，這似乎也無大礙，廣泛采用Iframe標記，既為自己(網(wǎng)站)著了想，又為網(wǎng)友節(jié)省了網(wǎng)費，何樂而不為？?
例子?
<iframe?src="頁面"?width="寬度"?height="高度"?align="排列可以是left或right,center"?scrolling="是否有滾動條可以填no或yes"?></iframe>?
<IFRAME?frameBorder=0?frameSpacing=0?height=25?marginHeight=0?marginWidth=0?scrolling=no?name=main?src="bgm/bgm.html"?width=300></IFRAME>
用了iframe后 發(fā)現(xiàn)滾動條不漂亮 想用圖片來代替??
用下列代碼替換網(wǎng)頁的?
<title>..</title>?
<SCRIPT?LANGUAGE="javascript">?
function?scroll(n)?
{temp=n;?
Out1.scrollTop=Out1.scrollTop+temp;?
if?(temp==0)?return;?
setTimeout("scroll(temp)",80);?
}?
</SCRIPT>?
<TABLE?WIDTH="330">?
<TR>?
<TD?WIDTH="304"?VALIGN="TOP"?ROWSPAN="2"?>?
<DIV?ID=Out1?STYLE="width:100%;?height:100;overflow:?hidden?;border-style:dashed;border-width:?1px,1px,1px,1px;">?
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
</DIV>?
</TD>?
<TD?WIDTH="14"?VALIGN="TOP"><IMG?SRC="photo/up0605.gif"?WIDTH="14"?HEIGHT?="20"?οnmοuseοver="scroll(-1)"?οnmοuseοut="scroll(0)"?οnmοusedοwn="scroll?(-3)"?BORDER="0"?ALT="按下鼠標速度會更快！"></TD>?
</TR>?
<TR>?
<TD?WIDTH="14"?VALIGN="BOTTOM"><IMG?SRC="photo/down0605.gif"?onmouseover?="scroll(1)"?οnmοuseοut="scroll(0)"?οnmοusedοwn="scroll(3)"?BORDER="0"?WIDTH?="15"?HEIGHT="21"?ALT="按下鼠標速度會更快！"></TD>?
</TR>?
</TABLE>
內(nèi)框架Iframe的使用?
使用Iframe可以在一人表格內(nèi)調(diào)用一個外部文件，是非常有用的。本網(wǎng)站在很多頁面上都使用了iframe效果。?
現(xiàn)在我們學一下Iframe標記的使用。?
Iframe標記的使用格式是:?
下面使更多的補充：
<iframe>是框架的一種形式，也比較常用到。?
例子1。a標簽的target 與?iframe 的?name
如果一個頁面里面有框架。。隨便點頁面里的連接，要求在這個<iframe> 里打開。在iframe 中加入name=名?
<iframe name=名??></iframe>?
然后再修改默認打開模式，：網(wǎng)頁HEAD中加上<a href=URL target=名?>?
例子2。?
要插入一個頁面。要求只拿中間一部分。其他的都不要。，。。?
代碼：?
<iframe?name=123?align=middle?marginwidth=0?marginheight=0?vspace=-170?hspace=0?src="http://www.jb51.net/"?frameborder=no?scrolling=no?width=776?height=2500></iframe>
? ? ? ?其實相當于把源頁面截圖在iframe中顯示,控制插入頁被框架覆蓋的深度 marginwidth=0 marginheight=0；控制框架覆蓋上部分的深度 vspace=-170?
scrolling滾動條要否（auto、yes、no） frameborder框架的邊框大小，width=776 height=2500此框架的大小。?
? ?如果把frameborder設為1，效果就像文本框一樣?
透明的IFRAME的用法?
必需IE5.5以上版本才支持?
在transparentBody.htm文件的<body>標簽中，我已經(jīng)加入了style=”background-color=transparent” 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現(xiàn)方法應該會有個清晰的了解：?
<IFRAME?ID="Frame1"?SRC="transparentBody.htm"?allowTransparency="true"></IFRAME>?
<IFRAME?ID="Frame2"?SRC="transparentBody.htm"?allowTransparency="true"?STYLE="background-color:?green">?</IFRAME>?
<IFRAME?ID="Frame3"?SRC="transparentBody.htm"></IFRAME>?
<IFRAME?ID="Frame4"?SRC="transparentBody.htm"?STYLE="background-color:?green">?</IFRAME>
?
重點1：利用javascript指定iframe的src并重新加載該iframe(見本文最下面我的項目)?
難點1：設置iframe的背景色?
a.html 中
<script>?
function?setBG(){?
var?strColor=document.bgColor;?
frm.document.bgColor=strColor;?
}?
</script>?
<body?style='background-color:red'?οnlοad='setBG()'>?
<iframe?src='about:blank'?name=frm></iframe>
難點2：?
窗口與浮動幀之間的相互控制?
在腳本語言與對象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動幀則稱為子窗體，弄清這兩者的關系很重要，因為要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能通過程序來訪問并控制窗體。?
1、在父窗體中訪問并控制子窗體中的對象?
在父窗體中，Iframe即子窗體是document對象的一個子對象，可以直接在腳本中訪問子窗體中的對象。?
現(xiàn)在就有一個問題，即，我們怎樣來控制這個Iframe，這里需要講一下Iframe對象。當我們給這個標記設置了ID 屬性后，就可通過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。?
比如在example.htm里嵌入page.htm文件，并控制page.htm里一些標記對象：?
<Iframe?src="test.htm"?id="test"?width="250"?height="200"?scrolling="no"?frameborder="0"></iframe>
page.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對象模型一致，對對象訪問控制方式一樣，就不再贅述。?
2、在子窗體中訪問并控制父窗體中對象?
在子窗體中我們可以通過其parent即父（雙親）對象來訪問父窗口中的對象。?
如example.htm：?
<html>?<body?οnclick="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中訪問ID號為myH2中的標題文字并將之改為”hello,my friend”，我們就可以這樣寫：?
parent.myH2.innerText="hello,my?friend"
????????或者
parent.document.getElementById("myH2").innerText="hello,my?friend"
這里parent對象就代表當前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對象，無一例外都通過parent對象來進行。?
3:frame的一個子元素訪問frame的另一個子元素?
例如：框架文件frame.html中嵌入了另外兩個html文件?
<div?styleClass="basewnd">?
<!--?搜索?-->?
<div?id="search"?name="test"?align="center"?class="top_list_home">?
<iframe?id="frameSearch"?name="search"?src="Search.html"?frameBorder="0"?scrolling="no"?width="195px"?height="150px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?單位目錄樹?-->?
<div?align="center"?class="welcome_tag_home">?
<iframe?src="DirectoryTree.html"?frameBorder="0"?scrolling="no"?width="195px"?height="427px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
</div>
那么現(xiàn)在要在DirectoryTree.html文件中訪問Search.html文件中的一個id為section的<font></font>標簽的innerHTML屬性，則可以這樣：?
alert(parent.document.search.section.innerHTML)
其中search是“搜索”div的id，或者：?
alert(parent.document.getElementById("search").section.innerHTML)
或者也可以這樣：?
alert(parent.document.frames["frameSublist"].name)(這是直接訪問iframe)
下面這段代碼可以實現(xiàn)IFrame自適應高度，即隨著頁面的長度，自動適應以免除頁面和IFrame同時出現(xiàn)滾動條。?
源代碼如下?
<script?type="text/javascript">?
//**?iframe自動適應頁面?**//?
//輸入你希望根據(jù)頁面高度自動調(diào)整高度的iframe的名稱的列表?
//用逗號把每個iframe的ID分隔.?例如:?["myframe1",?"myframe2"]，可以只有一個窗體，則不用逗號。?
//定義iframe的ID?
var?iframeids=["test"]?
//如果用戶的瀏覽器不支持iframe是否將iframe隱藏?yes?表示隱藏，no表示不隱藏?
var?iframehide="yes"?
function?dyniframesize()?
{?
var?dyniframe=new?Array()?
for?(i=0;?i<iframeids.length;?i++)?
{?
if?(document.getElementById)?
{?
//自動調(diào)整iframe高度?
dyniframe[dyniframe.length]?=?document.getElementById(iframeids);?
if?(dyniframe?&&?!window.opera)?
{?
dyniframe.style.display="block"?
if?(dyniframe.contentDocument?&&?dyniframe.contentDocument.body.offsetHeight)?//如果用戶的瀏覽器是NetScape?
dyniframe.height?=?dyniframe.contentDocument.body.offsetHeight;?
else?if?(dyniframe.Document?&&?dyniframe.Document.body.scrollHeight)?//如果用戶的瀏覽器是IE?
dyniframe.height?=?dyniframe.Document.body.scrollHeight;?
}?
}?
//根據(jù)設定的參數(shù)來處理不支持iframe的瀏覽器的顯示問題?
if?((document.all?||?document.getElementById)?&&?iframehide=="no")?
{?
var?tempobj=document.all??document.all[iframeids]?:?document.getElementById(iframeids)?
tempobj.style.display="block"?
}?
}?
}?
if?(window.addEventListener)?
window.addEventListener("load",?dyniframesize,?false)?
else?if?(window.attachEvent)?
window.attachEvent("onload",?dyniframesize)?
else?
window.οnlοad=dyniframesize?
</script>
以下是本人自己在實際項目開發(fā)時利用frame寫的一段源代碼，僅供參考：?
主文件（框架）：?
<html>?
<head>?
<title>教育局資源管理系統(tǒng)</title>?
<script?src="resources/js/DirectoryTree/DirectoryTree.js"></script>?
<script?src="resources/js/date.js"></script>?
<link?rel="stylesheet"?type="text/css"?href="resources/css/frame.css">?
<link?rel="stylesheet"?type="text/css"?href="resources/css/global.css">?
<script?language="javascript">?
function?setBgColor()?
{?
var?bg=document.bgColor?
bottom.document.bgColor=bg?
}?
</script>?
</head>?
<body?bgcolor="#f9edff"?οnlοad="setBgColor()">?
<div?styleClass="basewnd">?
<!--?LOGO?-->?
<div?align="center"?class="flag">?
<iframe?src="resources/HTMLFolders/Logo.html"?frameBorder="0"?scrolling="no"?width="950px"?height="115px"?marginheight="0"></iframe>?
</div>?
<!--?用戶登陸?-->?
<div?align="center"?class="user">?
<iframe?src="resources/HTMLFolders/UserLogin.html"?frameBorder="0"?scrolling="no"?width="195px"?height="150px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?搜索?-->?
<div?id="search"?name="test"?align="center"?class="top_list_home">?
<iframe?id="frameSearch"?name="search"?src="resources/HTMLFolders/Search.html"?frameBorder="0"?scrolling="no"?width="195px"?height="150px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?導航條?-->?
<div?align="center"?class="navigation">?
<iframe?src="resources/HTMLFolders/Navigation.html"?frameBorder="0"?scrolling="no"?width="950px"?height="25px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?最新主題列表?-->?
<div?align="center"?class="newest_topic">?
<iframe?src="resources/HTMLFolders/Sublist.html"?frameBorder="0"?scrolling="no"?width="540px"?height="427px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?單位目錄樹?-->?
<div?align="center"?class="welcome_tag_home">?
<iframe?src="resources/HTMLFolders/DirectoryTree.html"?frameBorder="0"?scrolling="no"?width="195px"?height="427px"?marginheight="0"?marginwidth="0"></iframe>?
</div>?
<!--?頁尾?-->?
<div?align="center"?class="rights_home">?
<iframe?id="bottom"?name="bottom"?src="resources/HTMLFolders/Bottom.html"?frameBorder="0"?scrolling="no"?width="950px"?height="100px"?marginheight="0"?marginwidth="0"?allowTransparency="true"?style="background-color:?red"></iframe>?
</div>?
</div>?
</body>?
</html>
被引用的文件UserLogin.html：?
<link?rel="stylesheet"?type="text/css"?href="../css/global.css">?
<table?border="0"?align="left"?width="193"?cellpadding="1"?cellspacing="0"?style="border-style:solid;border-width:1px;border-color:#eeeeee;">?
<tr><td>?
<table?border="0"?align="left"?width="190"?cellpadding="0"?cellspacing="0">?
<tr>?
<td?align="left"?valign="middle"?width="20"?height="25"?class="tdfnt12px"?background="../images/title_bar2.png"?>?
</td>?
<td?align="left"?valign="bottom"?height="25"?class="tdfnt12px"?background="../images/title_bar2.png">?
<font?style="height:18px;font-family:宋體;font-size:14px;"> <b>會員登錄</b></font>?
</td>?
</tr>?
</table>?
</td></tr>?
</table>?
<div?id="divLogin"?style="visibility:visible;position:absolute;left:10px;top:30px">?
<table?border="0"?align="left"?width="193"?cellpadding="1"?cellspacing="0"?style="border-style:solid;border-width:0px;border-color:#eeeeee;">?
<tr>?
<td?align="left"?valign="bottom"?height="45"><font?class="normal">用戶名：</font>?
<td?valign="bottom"><input?type="text"?name="userAreaUserName"?id="userAreaUserName"?class="id"?maxlength="16"/></td>?
</tr>?
<tr>?
<td?align="left"?height="40"><font?class="normal">密碼：</font>?
<td><input?type="password"?name="userAreaUserPwd"?id="userAreaUserPwd"?class="pwd"?maxlength="16"/></td>?
</tr>?
<tr>?
<td?align="center"?colspan="2"?class="tdfnt12px">?
<input?type="submit"?value="登錄"?style="color:black;border-color:skyblue;border-style:solid;border-width:0px;vertical-align:middle;font-family:宋體;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>?
</td>?
</tr>?
</table>?
</div>
現(xiàn)在假設“最新主題列表”文件中有一個超鏈接，點擊其，包含“最新主題列表”的iframe就重新加載，此時需要利用javascript來實現(xiàn)：?
<a?href=""?οnclick="redirect();?return?false">www.baidu.com</a>?
<script?language="javascript">?
function?redirect()?
{?
parent.document.frames["frameSublist"].location.href="www.baidu.com"?
}?
</script>
總結
以上是生活随笔為你收集整理的HTML IFRAME 用法小总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
