當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML IFRAME 用法小总结

發布時間：2025/6/15 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML IFRAME 用法小总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

iframe是框架的一種形式，也比較常用到,下面是對其在平時常用到屬性的總結

Iframe用法,下面是一個常規的列子

其中:

iframe用于設置文本或圖形的浮動圖文框或容器。?

border設定圍繞圖文框的邊緣寬度?
????其中還有快讀高度的設計
scrolling=no?是否有滾動條（YES,NO,AUTO)?
SRC?指定IFRAME調用的文件或圖片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)?
?
一、Iframe標記的使用?
提起Iframe，可能你早已將之扔到“被遺忘的角落”了，不過，說起其兄弟Frame就不會陌生了。Frame標記即幀標記，我們所說的多幀結構就是在一個瀏覽器窗口中顯示多個HTML文件。現在，我們遇到一種很現實的情況：如有一個教程，是一節一節地上，每頁末尾做一個“上一節“、“下一節“的鏈接，除了每節教程內容不同之外，頁面其它部分內容都是相同的，如果一頁一頁地做笨頁面，這似乎太讓人厭煩了，這時突發奇想，如果有一種方法讓頁面其它地方不變，只將教程做成一頁一頁的內容頁，不含其它內容，在點擊上下翻頁鏈接時，只改變教程內容部分，其它保持不變，這樣，一是省時，另則以后如教程有個三長兩短的變動，也很方便，不致于牽一發而動全軍了;更重要的是將那些廣告Banner、欄目列表、導航等幾乎每頁的都有的東西只下載一次后就不再下載了。 Iframe標記，又叫浮動幀標記，你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同于Frame標記最大的特征即這個標記所引用的 HTML文件不是與另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內容相互融合，成為一個整體，另外，還可以多次在一個頁面內顯示同一內容，而不必重復寫內容，一個形象的比喻即“畫中畫“電視。?
現在我們談一下Iframe標記的使用。?
Iframe標記的使用格式是:?

<Iframe?src="URL"?width="x"?height="x"?scrolling="[OPTION]"?frameborder="x"></iframe>

src：文件的路徑，既可是HTML文件，也可以是文本、ASP等；?

width、height：”畫中畫”區域的寬與高；?
scrolling:當SRC的指定的HTML文件在指定的區域不顯不完時，滾動選項，如果設置為NO，則不出現滾動條；如為Auto：則自動出現滾動條；如為Yes，則顯示;?
FrameBorder：區域邊框的寬度，為了讓“畫中畫“與鄰近的內容相融合，常設置為0。?
比如:?

<Iframe?src="http://www.jb51.net";;?width="250"?height="200"?scrolling="no"?frameborder="0"></iframe>

二、父窗體與浮動幀之間的相互控制在腳本語言與對象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動幀則稱為子窗體，弄清這兩者的關系很重要，因為要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能通過程序來訪問并控制窗體。?
1、在父窗體中訪問并控制子窗體中的對象?
在父窗體中，Iframe即子窗體是document對象的一個子對象，可以直接在腳本中訪問子窗體中的對象。?
現在就有一個問題，即，我們怎樣來控制這個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雖然內嵌在另一個HTML文件中，但它保持相對的獨立，是一個“獨立王國“喲，在單一HTML中的特性同樣適用于浮動幀中。?
試想一下，通過Iframe標記，我們可將那些不變的內容以Iframe來表示，這樣，不必重復寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動！另外，至關重要的是，它使頁面的修改更為可行，因為，不必因為版式的調整而修改每個頁面，你只需修改一個父窗體的版式即可了。?
有一點要注意，Nestscape瀏覽器不支持Iframe標記，但在時下IE的天下，這似乎也無大礙，廣泛采用Iframe標記，既為自己(網站)著了想，又為網友節省了網費，何樂而不為？?
例子?

用了iframe后發現滾動條不漂亮想用圖片來代替??

用下列代碼替換網頁的?

<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;">? 內容內容內容內容 </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>

內框架Iframe的使用?
使用Iframe可以在一人表格內調用一個外部文件，是非常有用的。本網站在很多頁面上都使用了iframe效果。?
現在我們學一下Iframe標記的使用。?
Iframe標記的使用格式是:?

下面使更多的補充：
<iframe>是框架的一種形式，也比較常用到。?
　　例子1。a標簽的target 與?iframe 的?name
　　如果一個頁面里面有框架。。隨便點頁面里的連接，要求在這個<iframe> 里打開。在iframe 中加入name=名?
<iframe name=名??></iframe>?
　　然后再修改默認打開模式，：網頁HEAD中加上<a href=URL target=名?>?
　　例子2。?
　　要插入一個頁面。要求只拿中間一部分。其他的都不要。，。。?
　　代碼：?

? ? ? ?其實相當于把源頁面截圖在iframe中顯示,控制插入頁被框架覆蓋的深度 marginwidth=0 marginheight=0；控制框架覆蓋上部分的深度 vspace=-170?
　　scrolling滾動條要否（auto、yes、no） frameborder框架的邊框大小，width=776 height=2500此框架的大小。?
　? ?如果把frameborder設為1，效果就像文本框一樣?

　　透明的IFRAME的用法?
　　必需IE5.5以上版本才支持?
　　在transparentBody.htm文件的<body>標簽中，我已經加入了style=”background-color=transparent” 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現方法應該會有個清晰的了解：?

<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 中

難點2：?
窗口與浮動幀之間的相互控制?
在腳本語言與對象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動幀則稱為子窗體，弄清這兩者的關系很重要，因為要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能通過程序來訪問并控制窗體。?
　　1、在父窗體中訪問并控制子窗體中的對象?
　　在父窗體中，Iframe即子窗體是document對象的一個子對象，可以直接在腳本中訪問子窗體中的對象。?
　　現在就有一個問題，即，我們怎樣來控制這個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>

　　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>

那么現在要在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)

下面這段代碼可以實現IFrame自適應高度，即隨著頁面的長度，自動適應以免除頁面和IFrame同時出現滾動條。?
源代碼如下?

以下是本人自己在實際項目開發時利用frame寫的一段源代碼，僅供參考：?
主文件（框架）：?

<html>? <head>? <title>教育局資源管理系統</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">? ? <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：?

現在假設“最新主題列表”文件中有一個超鏈接，點擊其，包含“最新主題列表”的iframe就重新加載，此時需要利用javascript來實現：?

<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 用法小总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
iframe

上一篇： HTML网页制作：[12]使用框架结构之
下一篇： HTML form 标签的 action