iframe標簽用法詳解(屬性、透明、自適應高度)

2024-08-26 00:17:18

字體：大中小

來源：轉載

供稿：網友

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

1、iframe 定義和用法

iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。

HTML 與 XHTML 之間的差異

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。

提示和注釋：

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對無法理解 iframe 的瀏覽器。

iframe標簽是成對出現的,以<iframe>開始,</iframe>結束

iframe標簽內的內容可以做為瀏覽器不支持iframe標簽時顯示

屬性

示例

代碼如下:
<iframe src="http://www.survivalescaperooms.com" 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.survivalescaperooms.com/vip/20767.html">http://www.survivalescaperooms.com/vip/20767.html</a>
<strong>4、通過js輸出iframe廣告代碼
</strong>[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://www.survivalescaperooms.com/vip/24902.html" frameborder=no scrolling=no width=660 height=80></iframe>');

上一篇：html5跨域通訊之postMessage的用法總結

下一篇：html頁面中常用的一些小方法整理