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

HTML

学习HTML：iframe用法总结收藏

發布時間：2023/12/10 HTML 27 豆豆

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

一：幾個例子——演示iframe的基本用法

例1：
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>

不用多說了，iframe的各個屬性含義如下：
width插入頁的寬；

height插入頁的高；

scrolling 是否顯示頁面滾動條（可選的參數為 auto、yes、no，如果省略這個參數，則默認為auto）；

frameborder? 邊框大小；
注意：URL建議用絕對路徑；

傳說中百DU用：<iframe width=0 height=0 frameborder=0 scrolling=auto src="WWW" mce_src="WWW" .webjx.com></iframe><br />黑了88*8。。。

例2：
如果一個頁面里面有框架。。隨便點頁面里的連接，要求在這個<iframe> 里打開。在iframe 中加入name=** （**自己設定）.
<iframe name=**? ></iframe>
然后在修改默認打開模式，：網頁HEAD中加上<a href="URL" mce_href="URL" target=**>或部分連接的目標框架設為（**）.

例3:
要插入一個頁面。要求只拿中間一部分。其他的都不要，代碼如下：
<iframe name=123? align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="<a href=" mce_src="<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/"><span style="color: #0000ff;" mce_style="color: #0000ff;"><span style="text-decoration: underline;" mce_style="text-decoration: underline;">http://www.webjx.com/</span></span></a>"? frameborder=no scrolling=no? width=776? height=2500></iframe>

控制插入頁被框架覆蓋的深度 marginwidth=0 marginheight=0；控制框架覆蓋上部分的深度 vspace=-170
scrolling滾動條要否（auto、yes、no）?? frameborder框架的邊框大小，width=776? height=2500此框架的大小。

例4:
??? 1、頁面內加入iframe
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>，
scrolling表示是否顯示頁面滾動條，可選的參數為auto、yes、no，如果省略這個參數，則默認為auto。

　　2、超鏈接指向這個嵌入的網頁，只要給這個iframe命名就可以了。方法是<iframe name=**>，例如我命名為aa，寫入這句HTML語言<iframe width=420 height=330 name=aa frameborder=0 src="http://www.cctv.com" mce_src="http://www.cctv.com"></iframe>，然后，網頁上的超鏈接語句應該寫為：<a? href="URL" mce_href="URL" target=aa>

　　3、如果把frameborder設為1，效果就像文本框一樣
　　透明的IFRAME的用法
　　必需IE5.5以上版本才支持
　　在transparentBody.htm文件的<body>標簽中，我已經加入了style="background- color=transparent" 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現方法應該會有個清晰的了解：
<IFRAME ID="Frame1" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm" mce_SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>
?
二：（難點）設置iframe框架的背景色

a.htm?
? <mce:script type="text/javascript"></mce:script>?
? <body?? style="background-color:red" mce_style="background-color:red"?? οnlοad='setBG()'>?
? <iframe?? src="about:blank" mce_src="about:blank"?? name=frm></iframe>
?
三：（難點）窗口與浮動幀之間的相互控制

在腳本語言與對象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動幀則稱為子窗體，弄清這兩者的關系很重要，因為要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能通過程序來訪問并控制窗體。
　　??? 1、在父窗體中訪問并控制子窗體中的對象
　　在父窗體中，Iframe即子窗體是document對象的一個子對象，可以直接在腳本中訪問子窗體中的對象。
　　現在就有一個問題，即，我們怎樣來控制這個Iframe，這里需要講一下Iframe對象。當我們給這個標記設置了ID 屬性后，就可通過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。
　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些標記對象：
　　<Iframe src="test.htm" mce_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" mce_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" mce_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" mce_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不是標準HTML標簽，因此這些方法總是時不時地失靈，因此最好使用下面的方法：
??????????????????????????????????????? obj = parent.document.getElementById("frameSearch").contentWindow
?????obj=obj.document.getElementById("section")
??????????????????????????????????????? obj.innerHTML="大家好！"
這種方法屢試不爽，關于具體的介紹，見下面的第四節（用JS訪問操作iframe里的dom完全攻略！）
　　Iframe雖然內嵌在另一個HTML文件中，但它保持相對的獨立，是一個“獨立王國“喲，在單一HTML中的特性同樣適用于浮動幀中。試想一下，通過Iframe標記，我們可將那些不變的內容以Iframe來表示，這樣，不必重復寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動！另外，至關重要的是，它使頁面的修改更為可行，因為，不必因為版式的調整而修改每個頁面，你只需修改一個父窗體的版式即可了。

??????? 4:最適用的iframe內部和外部元素的訪問方法（在各個瀏覽器中都適用，并且不會失靈，而上面介紹的那些方法中，很多用過一兩次后就失靈了）
???? 請見下一個文本框。　　
?
四：（重重之點）用JS訪問操作iframe里的dom完全攻略！

兩個頁面，一個頁面是iframe所在頁面(頁面名稱：iPage.html)，另一個頁面是iframe屬性src指向頁面（頁面名稱：srcPage.html）。
iPage.html，<body>里dom：
<iframe id=“iId“ name=“iName“ src="“srcPage.html“" mce_src="“srcPage.html“" scrolling=“no“ frameborder=“0“></iframe>
srcPage.html，<body>里dom：
<h1>妹妹的一天</h1>
<p>早上吃早點，中午約會吃飯，下午K歌，晚上和哥哥瞎折騰</p>
下面討論ie下JS是怎么操作以上兩個頁面，再討論firefox的做法，最后給出兼容ie,firefox瀏覽器操作iframe對象的方法。
一、ie下訪問操作iframe里內容
大家都知道iframe是非標準html標簽，它是由ie瀏覽器推出的多布局標簽, 隨后Mozilla也支持了這個標簽。(閑話，嘿嘿)
1. ie通過document.frames["IframeName"]獲取它，例子：我們在iPage.html里輸出srcPage.html里h1的內容，JS如下，firefox下document.frames 沒有定義錯誤提示：
window.onload = (function () {
? alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});
2. ie另一種方法contentWindow獲取它，代碼：
window.onload = (function () {
?var iObj = document.getElementById(‘iId‘).contentWindow;
?alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法經過ie6,ie7,firefox2.0,firefox3.0測試都通過，好事啊！嘿嘿。（網上一查，發現Mozilla Firefox iframe.contentWindow.focus緩沖區溢出漏洞，有腳本注入攻擊的危險。
后來聽說可以在后臺防止這樣的事情發生，算是松了口氣。不過還是希望firefox新版本可以解決這樣的危險。）
3.改變srcPage.html里h1標題內容，代碼：
iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘;
通過contentWindow后訪問里面的節點就和以前一樣了。
二、firefox下訪問操作iframe里內容
Mozilla支持通過IFrameElmRef.contentDocument訪問iframe的document對象的W3C標準，通過標準可以少寫一個document,代碼：
var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
兼容這兩種瀏覽器的方法，現在也出來了，就是使用contentWindow這個方法。
嘿嘿！操作iframe是不是可以隨心所欲了呢？如果還覺得不爽，你甚至可以重寫iframe里的內容。
三、重寫iframe里的內容
通過designMode（設置文檔為可編輯設計模式）和contentEditable（設置內容為可編輯），你可以重寫iframe里的內容。代碼：
var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘<html><head>‘);
iObj.document.writeln(‘<mce:style></mce:style><style mce_bogus="1">body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
iObj.document.writeln(‘</head><body></body></html>‘);
iObj.document.close();
這兩個對象的資料可參考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx
四、iframe自適應高度
有了上面的原理要實現這個相當簡單，就是把iframe的height值設置成它里面文檔的height值就可以。代碼：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height =? iObj.contentWindow.document.documentElement.scrollHeight;});
現在對JS操作iframe你已經有了全新的認識，說不定那天會因為這個有什么新的web技術名詞，嘿嘿，臭美下！
PS:
1. Document.designMode ,Document.contentEditable在你這里的使用場景錯了,他一般是應用在在線編輯器上的,如果你并不是開放給用戶操作的話,根本沒必要設置這個屬性!
2. 另外之所以要用 window.onload,是因為頁面加載中,iframe的加載順序是在最后的,也就是說,在沒用window.onload的情況下,在執行你那段js的時候iframe里的dom都還沒加載到,這樣自然是無輸出的了
3. 如果是在兩個不同的子域下，上面的代碼需要做小的改動。
調用iframe的頁面和被iframe的頁面需要增加設置 document.domain 的代碼，指明同一個根域即可。
參考資料：
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx
http://www.kuqin.com/webpagedesign/20080516/8536.html
http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
此外，用DOM方法與jquery方法結合的方式：
1.在父窗口中操作選中IFRAME中的所有單選鈕
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作選中父窗口中的所有單選鈕
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的：<iframe src="test.html" mce_src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
3.Try this:
$("#myid", top.document);
the top.document tells the selector to target the myid element which
exists in the topmost document (your parent page).? In order for this
to work, jquery must be loaded in the file which is viewed through the
iframe.
我的代碼
$('#parentElem', top.document).append('<div class="imgbox" id="imgbox"><img class="img" src="pp.png" mce_src="pp.png" id="img"></div>');
--end--
?
五：用圖片代替iframe的滾動條

<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" mce_src="bgm/bgm.html" width=300></IFRAME>
用了iframe后發現滾動條不漂亮想用2個圖片來代替↑↓應該怎么實現呢？
回答：用下列代碼替換網頁的<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;" mce_STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" mce_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" mce_SRC="photo/down0605.gif" οnmοuseοver="scroll(1)" οnmοuseοut="scroll(0)"????? οnmοusedοwn="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠標速度會更快！"></TD>
</TR>
</TABLE>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下面這段代碼可以實現IFrame自適應高度，即隨著頁面的長度，自動適應以免除頁面和IFrame同時出現滾動條。
源代碼如下:
<mce:script type="text/javascript"></mce:script>
六：iframe屬性

屬性值描述 DTD
align left
right
top
middle
bottom
?規定如何根據周圍的文本來排列此框架。 TF
frameborder 1
0
?規定是否顯示框架的邊框。 TF
height pixels
%
?定義 iframe 的高度。 TF
longdesc URL 描述此框架內容的長描述的URL。 TF
marginheight pixels 定義 iframe 的頂部和底部的邊距。 TF
marginwidth pixels 定義 iframe 的左側和右側的邊距。 TF
name frame_name 規定 iframe 的唯一名稱（以便在腳本中使用）。 TF
scrolling yes
no
auto
?定義滾動條。 TF
src URL 在 iframe 中顯示文檔的 URL。 TF
width pixels
%
?定義 iframe 的寬度。 TF

七：本人項目部分代碼參考

以下是本人自己在實際項目開發時利用frame寫的一段源代碼，僅供參考：
主文件（框架）：
<html>
<head>
?<title>教育局資源管理系統</title>
?<mce:script src="resources/js/DirectoryTree/DirectoryTree.js" mce_src="resources/js/DirectoryTree/DirectoryTree.js"></mce:script>
?<mce:script src="resources/js/date.js" mce_src="resources/js/date.js"></mce:script>
?<link rel="stylesheet" type="text/css" href="resources/css/frame.css" mce_href="resources/css/frame.css">
?<link rel="stylesheet" type="text/css" href="resources/css/global.css" mce_href="resources/css/global.css">
?<mce:script language="javascript"></mce:script>
</head>
<body bgcolor="#f9edff" οnlοad="setBgColor()">
<div styleClass="basewnd">
?
?<div align="center" class="flag">
? <iframe src="resources/HTMLFolders/Logo.html" mce_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" mce_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" mce_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" mce_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" mce_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" mce_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" mce_src="resources/HTMLFolders/Bottom.html"? frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red" mce_style="background-color: red"></iframe>
?</div>
</div>
</body>
</html>
被引用的文件UserLogin.html：
? <link rel="stylesheet" type="text/css" href="../css/global.css" mce_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;" mce_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;" mce_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="" οnclick="redirect(); return false">www.baidu.com</a>
<mce:script language="javascript"></mce:script>

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/BiologyPianoProgram/archive/2009/04/23/4103062.aspx

轉載于:https://www.cnblogs.com/superMarioli/archive/2009/08/12/3683774.html

總結

以上是生活随笔為你收集整理的学习HTML：iframe用法总结收藏的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Silverlight中使用MIRIA进
下一篇：为什么图片保存类型360 se html