1、iframe 定義和用法
iframe 元素會創建包含另外一個文檔的內聯框架(即行內框架)。
HTML 與 XHTML 之間的差異
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。
提示和注釋:
提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應對無法理解 iframe 的浏覽器。
iframe標簽是成對出現的,以<iframe>開始,</iframe>結束
iframe標簽內的內容可以做為浏覽器不支持iframe標簽時顯示
屬性
屬性 |
值 |
描述 |
DTD |
align
- left
- right
- top
- middle
- bottom
不贊成使用。請使用樣式代替。
規定如何根據周圍的元素來對齊此框架。
TF
frameborder
規定是否顯示框架周圍的邊框。
TF
height
規定 iframe 的高度。
TF
longdesc
URL
規定一個頁面,該頁面包含了有關 iframe 的較長描述。
TF
marginheight
pixels
定義 iframe 的頂部和底部的邊距。
TF
marginwidth
pixels
定義 iframe 的左側和右側的邊距。
TF
name
frame_name
規定 iframe 的名稱。
TF
scrolling
規定是否在 iframe 中顯示滾動條。
TF
src
URL
規定在 iframe 中顯示的文檔的 URL。
TF
width
定義 iframe 的寬度。
TF
示例
復制代碼代碼如下:
<iframe src="http://www.jb51.net" width="200" height="500">
腳本之家使用了框架技術,但是您的浏覽器不支持框架,請升級您的浏覽器以便正常訪問腳本之家。
</iframe>
使用像素定義iframe框架大小
復制代碼代碼如下:
<iframe src="http://www.baidu.com" width="20%" height="50%">
腳本之家使用了框架技術,但是您的浏覽器不支持框架,請升級您的浏覽器以便正常訪問腳本之家。
</iframe>
使用百分比定義iframe框架大小
2、iframe 透明
在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>
iframe是迫不得已才使用的,因為使用iframe會帶來較多的問題,而有的浏覽器可以設置將iframe當作廣告屏蔽。
在最近的一個工作內容中使用了iframe,開始遇到的問題是iframe高度自適應的問題,這問題在口碑網ued團隊博客中找到了解決辦法,後來更遇到一個iframe透明的問題
通常 iframe底色會是白色,在不同浏覽器下可能會有不同的顏色
如果主頁面有一個整體的背景色或者背景圖片的時候
iframe區域便會出現一個白色塊,與主體頁面不協調,這就需要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" href="http://www.jb51.net/article/15780.htm">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://common.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>