首頁 > web前端 > html教學 > 如何使用iframe屬性

如何使用iframe屬性

小云云
發布: 2017-11-17 09:15:54
原創
3412 人瀏覽過

當我們學html前期的時候我們會遇到iframe這個屬性值,其實iframe是一個很有趣的標籤,現在小編就帶著初級的同學講一講。 HTML iframe 標籤的功能是建立包含另一個文件的內聯框架(即行內框架),通俗點的說法就是在一個html頁面嵌入另一個html頁面。這個標籤在實際工作中還是比較常見且重要的。例如一般web專案的後台基本都要用到iframe,還有我們登入各種郵箱也常常會看到點擊左邊鏈接,右邊網頁跟著切換等的效果,基本上都是透過iframe實現的。

所有瀏覽器都支援iframe標籤,因此不存在相容性問題。

iframe 比較常見的用法如下:

<iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="http://www.phpernote.com/"></iframe>
登入後複製

以上程式碼中的參數依實際情況需要再修改,以下列舉iframe的一些比較常見的屬性。

name 設定iframe的名稱

longdesc 關於iframe的描述說明,此屬性基本上不支援現在的主流瀏覽器,因此沒必要使用

border 設定iframe邊緣的寬度

bordercolor 設定iframe邊框的顏色,值可以是rgb色,也可以是顏色名稱

frameboder 設定邊框是否為3維(0=否,1=)

height 設定iframe的高度(可用像素值或百分比)

width 設定iframe的寬度(可用像素值或百分比)

marginheight 定義iframe的頂部和底部的邊距

marginwidth 定義iframe的左側和右側的邊距

scrolling 是否有捲軸(可取的值有yes,no,auto)

#src 指定iframe呼叫的檔案(可引用檔案如:html,htm,gif,jpeg,jpg,png,txt,*.*)

noresize 禁止調整尺寸,這個僅支援IE核心的瀏覽器

allowtransparency 是否允許透明。 IE5.5開始支援浮動框架的內容透明。如果想要為浮動框架定義透明內容,則必須滿足下列條件。

1. 與 iframe 元素一起使用的 allowTransparency 標籤屬性必須設為 true。

2. 在 iframe 內容來源文檔,background- color 或 body 元素的 bgColor 標籤屬性必須設定為 transparent。

實例如下:
(1)父框架頁的程式碼

<body bgColor="#eeeeee">     
<iframe allowTransparency="true" src="phpernote.html" noresize></iframe>
登入後複製

(2)子框架頁碼(即phpernote.html頁碼)

<body bgColor="transparent">
登入後複製

3 . 指定iframe的id屬性,取得iframe滾動條的高度和寬度

<iframe id="phpernote" src="www.phpernote.com"></iframe>    
<script type="text/javascript">    
var iframe=document.getElementById(&#39;phpernote&#39;);    
document.write(iframe.scrollHeight);//滚动条高度    
document.write(iframe.scrollWidth);//滚动条宽度    
</script>
登入後複製

以上就是iframe屬性的詳細說明,希望大家有所掌握,接下來小編還會為大家分享iframe高度自適應的設定方法,有需要的同學可以關注PHP中文網。

相關推薦:

iframe與主框架跨域相互訪問方法介紹

iframe子、父頁面域內及跨域通信實例

html中frame與iframe有哪些差異

#

以上是如何使用iframe屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板