class="area">
今天電腦知識吧在電腦知識吧的站長官方群裡面討論到一個“(屬性、透明、自適應高度)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標簽時顯示 屬性 屬性 值 描述 DTD align left right top middle bottom 不贊成使用。請使用樣式代替 規定如何根據周圍的元素來對齊此框架。 TF frameborder 1 0 規定是否顯示框架周圍的邊框。 TF height pixels % 規定 iframe 的高度。 TF longdesc URL 規定一個頁面,該頁面包含了有關 iframe 的較長描述。 TF marginheight pixels 定義 iframe 的頂部和底部的邊距。 TF marginwidth pixels 定義 iframe 的左側和右側的邊距。 TF name frame_name 規定 iframe 的名稱。 TF scrolling yes no auto 規定是否在 iframe 中顯示滾動條。 TF src URL 規定在 iframe 中顯示的文檔的 URL。 TF width pixels % 定義 iframe 的寬度。 TF 示例 復制代碼代碼如下: <iframe src="http://." 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://./article/15780.htm">http://./article/15780.htm</a><strong>4、通過js輸出iframe廣告代碼</strong>[code] document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.dnzsb.com/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');