iframe標簽用法詳解(屬性、透明、自適應高度)
來源:易賢網(wǎng) 閱讀:959 次 日期:2016-06-21 15:56:10
溫馨提示:易賢網(wǎng)小編為您整理了“iframe標簽用法詳解(屬性、透明、自適應高度)”,方便廣大網(wǎng)友查閱!

iframe一般用來包含別的頁面,例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內(nèi)容,為了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe屬性,這里簡單的整理下,方便需要的朋友

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> 之間,這樣就可以應對無法理解 iframe 的瀏覽器。

iframe標簽是成對出現(xiàn)的,以<iframe>開始,</iframe>結(jié)束

iframe標簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標簽時顯示

屬性

名單

示例

代碼如下:

<iframe src="http://www.jb51.net" width="200" height="500">

使用了框架技術(shù),但是您的瀏覽器不支持框架,請升級您的瀏覽器以便正常訪問腳本之家。

</iframe>

使用像素定義iframe框架大小

代碼如下:

<iframe src="http://www.baidu.com" width="20%" height="50%">

使用了框架技術(shù),但是您的瀏覽器不支持框架,請升級您的瀏覽器以便正常訪問腳本之家。

</iframe>

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

2、iframe 透明

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

代碼如下:

<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會帶來較多的問題,而有的瀏覽器可以設置將iframe當作廣告屏蔽。

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

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

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

iframe區(qū)域便會出現(xiàn)一個白色塊,與主體頁面不協(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>當然前提是iframe頁面中沒有設置顏色

[code]

注:iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent"

<strong>3、iframe自適應高度

</strong>由于篇幅過長,大家可以移步這里查看

<a target="_blank" >http://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標簽,那么就需要如下的寫法

代碼如下:

<iframe frameborder="0" name="Iframe1" src="http://www.jb51.net/" width="100%" height="200">

您的瀏覽器不支持嵌入式框架,或者當前配置為不顯示嵌入式框架。

</iframe>

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:iframe標簽用法詳解(屬性、透明、自適應高度)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)