iframe標簽用法詳解
2018-11-01 來源：學做網站論壇
1、iframe 定義和用法
iframe 元素會創(chuàng)建包含另外一個文檔的內聯(lián)框架（即行內框架）。
HTML 與 XHTML 之間的差異
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示和注釋：
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對無法理解 iframe 的瀏覽器。
iframe標簽是成對出現(xiàn)的,以<iframe>開始,</iframe>結束，與img標簽一樣。
iframe標簽內的內容可以做為瀏覽器不支持iframe標簽時顯示
屬性
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| align |
|
不贊成使用。請使用樣式代替。
規(guī)定如何根據(jù)周圍的元素來對齊此框架。 |
TF |
| frameborder |
|
規(guī)定是否顯示框架周圍的邊框。 | TF |
| height |
|
規(guī)定 iframe 的高度。 | TF |
| longdesc | URL | 規(guī)定一個頁面，該頁面包含了有關 iframe 的較長描述。 | TF |
| marginheight | pixels | 定義 iframe 的頂部和底部的邊距。 | TF |
| marginwidth | pixels | 定義 iframe 的左側和右側的邊距。 | TF |
| name | frame_name | 規(guī)定 iframe 的名稱。 | TF |
| scrolling |
|
規(guī)定是否在 iframe 中顯示滾動條。 | TF |
| src | URL | 規(guī)定在 iframe 中顯示的文檔的 URL。 | TF |
| width |
|
定義 iframe 的寬度。 | TF |
示例
學做網站論壇使用了框架技術，但是您的瀏覽器不支持框架，請升級您的瀏覽器以便正常訪問學做網站論壇。
</iframe>
使用像素定義iframe框架大小
學做網站論壇使用了框架技術，但是您的瀏覽器不支持框架，請升級您的瀏覽器以便正常訪問學做網站論壇。
</iframe>
使用百分比定義iframe框架大小
2、iframe 透明（相關知識：使用filter屬性設置DIV背景為透明，半透明）
在transparentBody.htm文件的<body>標簽中，我已經加入了style="background-color=transparent" 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現(xiàn)方法應該會有個清晰的了解：
<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區(qū)域便會出現(xiàn)一個白色塊，與主體頁面不協(xié)調，這就需要iframe透明
iframe透明找到了解決辦法
當然前提是iframe頁面中沒有設置顏色
注：iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent"
3、iframe自適應高度
方法：代碼簡單，兼容性還可以，大家可以先測試下。
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
最后，加入iframe,不能丟掉onload屬性，當然了，id也必須也函數(shù)中的win匹配
這么的這種也是跟上面的解決方法類似的代碼
4、通過js輸出iframe廣告代碼
5、檢測瀏覽器是否支持iframe標簽
您的瀏覽器不支持嵌入式框架，或者當前配置為不顯示嵌入式框架。
</iframe>
標簽： 代碼
版權申明：本站文章部分自網絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。
