HTML iframe 用法小總結
Iframe用法,下面是一個常規的列子javascript
<iframe border=2 frameborder=0 width=500 height=500 marginheight=0 marginwidth=0 scrolling=no src="move-ad.html"> </iframe>
其中:css
iframe用於設置文本或圖形的浮動圖文框或容器。 html
border設定圍繞圖文框的邊緣寬度
其中還有快讀高度的設計
scrolling=no 是否有滾動條（YES,NO,AUTO)
SRC 指定IFRAME調用的文件或圖片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)
1、Iframe標記的使用
提起Iframe，可能你早已將之扔到「被遺忘的角落」了，不過，提及其兄弟Frame就不會陌生了。Frame標記即幀標記，咱們所說的多幀結構就是在一個瀏覽器窗口中顯示多個HTML文件。如今，咱們遇到一種很現實的狀況：若有一個教程，是一節一節地上，每頁末尾作一個「上一節「、「下一節「的連接，除了每節教程內容不一樣以外，頁面其它部份內容都是相同的，若是一頁一頁地作笨頁面，這彷佛太讓人厭煩了，這時突發奇想，若是有一種方法讓頁面其它地方不變，只將教程作成一頁一頁的內容頁，不含其它內容，在點擊上下翻頁連接時，只改變教程內容部分，其它保持不變，這樣，一是省時，另則之後如教程有個三長兩短的變更，也很方便，不致於牽一髮而動全軍了;更重要的是將那些廣告Banner、欄目列表、導航等幾乎每頁的都有的東西只下載一次後就再也不下載了。 Iframe標記，又叫浮動幀標記，你能夠用它將一個HTML文檔嵌入在一個HTML中顯示。它不一樣於Frame標記最大的特徵即這個標記所引用的 HTML文件不是與另外的HTML文件相互獨立顯示，而是能夠直接嵌入在一個HTML文件中，與這個HTML文件內容相互融合，成爲一個總體，另外，還能夠屢次在一個頁面內顯示同一內容，而沒必要重複寫內容，一個形象的比喻即「畫中畫「電視。
如今咱們談一下Iframe標記的使用。
Iframe標記的使用格式是: java
<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>
2、父窗體與浮動幀之間的相互控制 在腳本語言與對象層次中，包含Iframe的窗口咱們稱之爲父窗體，而浮動幀則稱爲子窗體，弄清這二者的關係很重要，由於要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能經過程序來訪問並控制窗體。
一、在父窗體中訪問並控制子窗體中的對象
在父窗體中，Iframe即子窗體是document對象的一個子對象，能夠直接在腳本中訪問子窗體中的對象。
如今就有一個問題，即，咱們怎樣來控制這個Iframe，這裏須要講一下Iframe對象。當咱們給這個標記設置了ID 屬性後，就可經過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。
好比在example.htm裏嵌入test.htm文件，並控制test.htm裏一些標記對象：
ide
<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 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中訪問ID號爲myH2中的標題文字並將之改成"hello,my friend"，咱們就能夠這樣寫：
網站
parent.myH2.innerText="hello,my friend"
這裏parent對象就表明當前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對象，無一例外都經過parent對象來進行。
Iframe雖然內嵌在另外一個HTML文件中，但它保持相對的獨立，是一個「獨立王國「喲，在單一HTML中的特性一樣適用於浮動幀中。
試想一下，經過Iframe標記，咱們可將那些不變的內容以Iframe來表示，這樣，沒必要重複寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動！另外，相當重要的是，它使頁面的修改更爲可行，由於，沒必要由於版式的調整而修改每一個頁面，你只需修改一個父窗體的版式便可了。
有一點要注意，Nestscape瀏覽器不支持Iframe標記，但在時下IE的天下，這彷佛也無大礙，普遍採用Iframe標記，既爲本身(網站)着了想，又爲網友節省了網費，何樂而不爲？
例子
url
<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後 發現滾動條不漂亮 想用圖片來代替?
用下列代碼替換網頁的
<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" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll (-3)" BORDER="0" ALT="按下鼠標速度會更快！"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="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 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>標籤中，我已經加入了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 中
<script>
function setBG(){
var strColor=document.bgColor;
frm.document.bgColor=strColor;
}
</script>
<body style='background-color:red' onload='setBG()'>
<iframe src='about:blank' name=frm></iframe>
難點2：
窗口與浮動幀之間的相互控制
在腳本語言與對象層次中，包含Iframe的窗口咱們稱之爲父窗體，而浮動幀則稱爲子窗體，弄清這二者的關係很重要，由於要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能經過程序來訪問並控制窗體。
一、在父窗體中訪問並控制子窗體中的對象
在父窗體中，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>
如咱們要改變ID號爲myH1的H1標記裏的文字爲hello,my dear，則可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe標記對象所指的子窗體與通常的DHTML對象模型一致，對對象訪問控制方式同樣，就再也不贅述。
二、在子窗體中訪問並控制父窗體中對象
在子窗體中咱們能夠經過其parent即父（雙親）對象來訪問父窗口中的對象。
如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中訪問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同時出現滾動條。
源代碼以下
<script type="text/javascript">
//** iframe自動適應頁面 **//
//輸入你但願根據頁面高度自動調整高度的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)
{
//自動調整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;
}
}
//根據設定的參數來處理不支持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.onload=dyniframesize
</script>
如下是本人本身在實際項目開發時利用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" onload="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>
如今假設「最新主題列表」文件中有一個超連接，點擊其，包含「最新主題列表」的iframe就從新加載，此時須要利用javascript來實現：
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<script language="javascript">
function redirect()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}
</script>
- 1. iframe用法總結
- 2. HTML iframe用法
- 3. HTML:小總結
- 4. iframe使用總結
- 5. iframe總結 + window.open
- 6. Iframe使用總結（實戰）
- 7. iframe使用總結（實戰）
- 8. HTML & CSS 小總結
- 9. html-webpack-plugin用法總結
- 10. Html-iframe
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • SVG 在 HTML 頁面 - SVG 教程
- • 算法總結-回溯法
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. iframe用法總結
- 2. HTML iframe用法
- 3. HTML:小總結
- 4. iframe使用總結
- 5. iframe總結 + window.open
- 6. Iframe使用總結（實戰）
- 7. iframe使用總結（實戰）
- 8. HTML & CSS 小總結
- 9. html-webpack-plugin用法總結
- 10. Html-iframe