主頁 > 知識庫 > iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)

iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)

熱門標(biāo)簽:硅谷的囚徒呼叫中心 使用U盤裝系統(tǒng) 智能手機 美圖手機 百度競價點擊價格的計算公式 網(wǎng)站建設(shè) 檢查注冊表項 阿里云

1、iframe 定義和用法

iframe 元素會創(chuàng)建包含另外一個文檔的內(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)簽時顯示

屬性

屬性 描述 DTD
align
  • left
  • right
  • top
  • middle
  • bottom

不贊成使用。請使用樣式代替。

規(guī)定如何根據(jù)周圍的元素來對齊此框架。

TF
frameborder
  • 1
  • 0
規(guī)定是否顯示框架周圍的邊框。 TF
height
  • pixels
  • %
規(guī)定 iframe 的高度。 TF
longdesc URL 規(guī)定一個頁面,該頁面包含了有關(guān) iframe 的較長描述。 TF
marginheight pixels 定義 iframe 的頂部和底部的邊距。 TF
marginwidth pixels 定義 iframe 的左側(cè)和右側(cè)的邊距。 TF
name frame_name 規(guī)定 iframe 的名稱。 TF
scrolling
  • yes
  • no
  • auto
規(guī)定是否在 iframe 中顯示滾動條。 TF
src URL 規(guī)定在 iframe 中顯示的文檔的 URL。 TF
width
  • pixels
  • %
定義 iframe 的寬度。 TF

示例


復(fù)制代碼
代碼如下:

<iframe src="https://www.jb51.net" width="200" height="500">
腳本之家使用了框架技術(shù),但是您的瀏覽器不支持框架,請升級您的瀏覽器以便正常訪問腳本之家。
</iframe>

使用像素定義iframe框架大小

復(fù)制代碼
代碼如下:

<iframe src="http://www.baidu.com" width="20%" height="50%">
腳本之家使用了框架技術(shù),但是您的瀏覽器不支持框架,請升級您的瀏覽器以便正常訪問腳本之家。
</iframe>

使用百分比定義iframe框架大小

2、iframe 透明

在transparentBody.htm文件的<body>標(biāo)簽中,我已經(jīng)加入了style="background-color=transparent" 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現(xiàn)方法應(yīng)該會有個清晰的了解:


復(fù)制代碼
代碼如下:

<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是迫不得已才使用的,因為使用iframe會帶來較多的問題,而有的瀏覽器可以設(shè)置將iframe當(dāng)作廣告屏蔽。

在最近的一個工作內(nèi)容中使用了iframe,開始遇到的問題是iframe高度自適應(yīng)的問題,這問題在口碑網(wǎng)ued團隊博客中找到了解決辦法,后來更遇到一個iframe透明的問題

通常 iframe底色會是白色,在不同瀏覽器下可能會有不同的顏色

如果主頁面有一個整體的背景色或者背景圖片的時候

iframe區(qū)域便會出現(xiàn)一個白色塊,與主體頁面不協(xié)調(diào),這就需要iframe透明

通過google搜索iframe透明找到了解決辦法

復(fù)制代碼
代碼如下:

<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"
<strong>3、iframe自適應(yīng)高度
</strong>由于篇幅過長,大家可以移步這里查看
<a target="_blank" >https://www.jb51.net/article/15780.htm</a>
<strong>4、通過js輸出iframe廣告代碼
</strong>[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>');


5、有時候我們需要考慮用戶的瀏覽器是否支持iframe標(biāo)簽,那么就需要如下的寫法


復(fù)制代碼
代碼如下:

<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200">
您的瀏覽器不支持嵌入式框架,或者當(dāng)前配置為不顯示嵌入式框架。
</iframe>

標(biāo)簽:湖北 山南 湘潭 通遼 煙臺 賀州 懷化 黃山

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266