HTML iframe標簽用法案例詳解
目錄
- 一、iframe定義和用法
- 二、屬性
- 三、示例
- 1、iframe框架
- 2、iframe透明
- 3、iframe自適應高度
- 4、通過js輸出iframe廣告代碼
iframe一般用來包含別的頁面，例如我們可以在我們自己的網站頁面加載別人網站的內容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性。
一、iframe 定義和用法
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
HTML 與 XHTML 之間的差異
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示和注釋：
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對無法理解 iframe 的瀏覽器。
iframe標簽是成對出現的,以<iframe>開始,</iframe>結束
iframe標簽內的內容可以做為瀏覽器不支持iframe標簽時顯示
二、屬性
New ：HTML5 中的新屬性。
right
top
middle
bottom HTML5 不支持。HTML 4.01 已廢棄。 規定如何根據周圍的元素來對齊 <iframe>。 frameborder 1
0 HTML5 不支持。規定是否顯示 <iframe> 周圍的邊框。 height pixels 規定 <iframe> 的高度。 longdesc URL HTML5 不支持。規定一個頁面，該頁面包含了有關 <iframe> 的較長描述。 marginheight pixels HTML5 不支持。規定 <iframe> 的頂部和底部的邊距。 marginwidth pixels HTML5 不支持。規定 <iframe> 的左側和右側的邊距。 name name 規定 <iframe> 的名稱。 sandboxNew ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation 對 <iframe> 的內容定義一系列額外的限制。 scrolling yes
no
auto HTML5 不支持。規定是否在 <iframe> 中顯示滾動條。 seamlessNew seamless 規定 <iframe> 看起來像是父文檔中的一部分。 src URL 規定在 <iframe> 中顯示的文檔的 URL。 srcdocNew HTML_code 規定頁面中的 HTML 內容顯示在 <iframe> 中。 width pixels 規定 <iframe> 的寬度。
三、示例
1、iframe框架
代碼如下:
<iframe src="https://www.test.net" width="200" height="500"> 該網站使用了框架技術，但是您的瀏覽器不支持框架，請升級您的瀏覽器以便正常訪問。 </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" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>
當然前提是iframe頁面中沒有設置顏色
[code]
注：iframe透明主要是使用了 allowtransparency="true"
3、iframe自適應高度
由于篇幅過長，大家可以移步這里查看
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>");
有時候我們需要考慮用戶的瀏覽器是否支持iframe標簽，那么就需要如下的寫法
代碼如下:
<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200"> 您的瀏覽器不支持嵌入式框架，或者當前配置為不顯示嵌入式框架。 </iframe>
到此這篇關于HTML iframe標簽用法案例詳解的文章就介紹到這了,更多相關HTML iframe標簽用法內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
相關文章：
1. html清除浮動的6種方法示例2. 低版本IE正常運行HTML5+CSS3網站的3種解決方案3. HTML DOM setInterval和clearInterval方法案例詳解4. HTML <!DOCTYPE> 標簽5. XHTML 1.0：標記新的開端6. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案7. html小技巧之td,div標簽里內容不換行8. HTML5 Canvas繪制圖形從入門到精通9. flappy bird游戲源代碼揭秘和下載 —— 可運行于android、ios和html5多平臺10. 存儲于xml中需要的HTML轉義代碼
網公網安備