HTML iframe標(biāo)簽用法案例詳解
iframe一般用來包含別的頁面,例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內(nèi)容,為了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe屬性。
一、iframe 定義和用法
iframe 元素會創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)。
HTML 與 XHTML 之間的差異
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。
提示和注釋:
提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應(yīng)對無法理解 iframe 的瀏覽器。
iframe標(biāo)簽是成對出現(xiàn)的,以<iframe>開始,</iframe>結(jié)束
iframe標(biāo)簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標(biāo)簽時(shí)顯示
二、屬性
New :HTML5 中的新屬性。
屬性 | 值 | 描述 |
---|---|---|
align | left right top middle bottom |
HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定如何根據(jù)周圍的元素來對齊 <iframe>。 |
frameborder | 1 0 |
HTML5 不支持。規(guī)定是否顯示 <iframe> 周圍的邊框。 |
height | pixels | 規(guī)定 <iframe> 的高度。 |
longdesc | URL | HTML5 不支持。規(guī)定一個(gè)頁面,該頁面包含了有關(guān) <iframe> 的較長描述。 |
marginheight | pixels | HTML5 不支持。規(guī)定 <iframe> 的頂部和底部的邊距。 |
marginwidth | pixels | HTML5 不支持。規(guī)定 <iframe> 的左側(cè)和右側(cè)的邊距。 |
name | name | 規(guī)定 <iframe> 的名稱。 |
sandboxNew | "" allow-forms allow-same-origin allow-scripts allow-top-navigation |
對 <iframe> 的內(nèi)容定義一系列額外的限制。 |
scrolling | yes no auto |
HTML5 不支持。規(guī)定是否在 <iframe> 中顯示滾動條。 |
seamlessNew | seamless | 規(guī)定 <iframe> 看起來像是父文檔中的一部分。 |
src | URL | 規(guī)定在 <iframe> 中顯示的文檔的 URL。 |
srcdocNew | HTML_code | 規(guī)定頁面中的 HTML 內(nèi)容顯示在 <iframe> 中。 |
width | pixels | 規(guī)定 <iframe> 的寬度。 |
三、示例
1、iframe框架
代碼如下:
<iframe src="https://www.test.net" width="200" height="500"> 該網(wǎng)站使用了框架技術(shù),但是您的瀏覽器不支持框架,請升級您的瀏覽器以便正常訪問。 </iframe>
2、iframe透明
在transparentBody.htm文件的<body>標(biāo)簽中,我已經(jīng)加入了style="background-color=transparent" 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實(shí)現(xiàn)方法應(yīng)該會有個(gè)清晰的了解:
代碼如下:
<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>
注:iframe是迫不得已才使用的,因?yàn)槭褂胕frame會帶來較多的問題,而有的瀏覽器可以設(shè)置將iframe當(dāng)作廣告屏蔽。
在最近的一個(gè)工作內(nèi)容中使用了iframe,開始遇到的問題是iframe高度自適應(yīng)的問題,這問題在口碑網(wǎng)ued團(tuán)隊(duì)博客中找到了解決辦法,后來更遇到一個(gè)iframe透明的問題 ,通常 iframe底色會是白色,在不同瀏覽器下可能會有不同的顏色,如果主頁面有一個(gè)整體的背景色或者背景圖片的時(shí)候 ,iframe區(qū)域便會出現(xiàn)一個(gè)白色塊,與主體頁面不協(xié)調(diào),這就需要iframe透明
通過google搜索iframe透明找到了解決辦法
代碼如下:
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>
當(dāng)然前提是iframe頁面中沒有設(shè)置顏色
[code]
注:iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent"
3、iframe自適應(yīng)高度
由于篇幅過長,大家可以移步這里查看
http://chabaoo.cn/article/15780.htm
4、通過js輸出iframe廣告代碼
[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');
有時(shí)候我們需要考慮用戶的瀏覽器是否支持iframe標(biāo)簽,那么就需要如下的寫法
代碼如下:
<iframe frameborder="0" name="Iframe1" src="http://chabaoo.cn/" width="100%" height="200"> 您的瀏覽器不支持嵌入式框架,或者當(dāng)前配置為不顯示嵌入式框架。 </iframe>
到此這篇關(guān)于HTML iframe標(biāo)簽用法案例詳解的文章就介紹到這了,更多相關(guān)HTML iframe標(biāo)簽用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
塊元素block element和內(nèi)聯(lián)元素inline element
塊元素block element和內(nèi)聯(lián)元素inline element...2006-09-09