HTML iframe框架
来源:互联网 发布:怎么看淘宝销售排名 编辑:程序博客网 时间:2024/05/19 02:03
HTML iframe 框架
HTML iframe 是框架的一種,也稱為內置框架或內聯框架,用來在網頁內嵌入另外一個網頁,例如現在非常流行的嵌入 Facebook 粉絲團到部落格或個人網站、在網站內容加上按讚或分享的按鈕都是常見的應用方式,HTML iframe 可以自己設定要嵌入的網頁所佔空間,如寬度與高度,也可以設定是否要顯示邊框或捲軸,幾乎所有主流的瀏覽器都支援 HTML iframe 框架語法。
HTML iframe 基本語法
<iframe src="要嵌入的網頁網址"></iframe>
標準的 HTML iframe 框架語法是由<iframe>
開始至 </iframe>
結束,開頭的<iframe>
標籤內的 src 就是用來指定要嵌入的網頁網址,如果想要寫得更完整一點,可以在<iframe>
與 </iframe>
間加入"瀏覽器不支援的提示文字",當網友使用的瀏覽器不支援 HTML iframe 時,可以顯示提示文字讓網友知道有一個部分的內容沒有顯示。
HTML iframe 框架寬度與高度設定
<iframe src="要嵌入的網頁網址" width="寬度" height="高度"></iframe>
如果要替 iframe 加上寬度與高度,僅需使用 width 與 height 這兩個屬性即可,預設的屬性單位為 px,例如「width=”200” height=”200”」這樣寫就代表寬度與高度均是 200px,但為了管理上的效率,還是建議寫成「width=”200px” height=”200px”」比較完整,若是要使用百分比做為尺寸的單位,則一定要將百分比寫出來,例如「width=”30%” height=”50%”」這樣,否則瀏覽器可能會誤以為是用 px 做為單位。
HTML iframe 框架邊框顯示與隱藏
<iframe src="要嵌入的網頁網址" frameborder="0"></iframe>
網頁設計本來的風格在嵌入另一個網頁後,很可能會對原本的視覺效果有所影響,其中突兀的邊框可以說是相當明顯,還好 iframe 有提供隱藏邊框的功能,範例中的 frameborder=”0” 代表隱藏邊框,如果是 frameborder=”1” 則代表顯示邊框。
HTML iframe 框架 scrolling 捲軸
<iframe src="要嵌入的網頁網址" scrolling="no"></iframe>
既然是嵌入另一個網頁,就很可能會遇到網頁大小與主網頁的顯示區塊間的尺寸差異,嵌入的網頁可能很大或是內容很多,需要用到捲軸才方便,iframe 可以透過 scrolling 屬性來設定是否要顯示捲軸,scrolling 有三個屬性值,分別為 yes 代表要顯示捲軸、no 代表不顯示捲軸以及 auto 代表根據網頁大小自動顯示。
屬性混搭使用
<iframe src="要嵌入的網頁網址" width="200" height="200" frameborder="0" scrolling="no"></iframe>
以上幾個常用的屬性,可以同時用在一個 iframe 框架的設計上,調整出最適合的嵌入尺寸與形態,假設全部屬性都用上去,寫起來大至會向範例這個模樣,意思代表要嵌入一個寬度與高度都是 200px 的框架,邊框與捲軸都不顯示。
關於 iframe 內容的另開新視窗方式
HTML iframe 是框架功能,目的僅為用來嵌入其他 URL 的內容,至於透過 iframe 嵌入進來的內容,若要讓網友可以用新視窗開啟,例如被嵌入至網頁或部落格的 Facebook 粉絲團,網友可以直接從網頁中的 Facebook粉絲團直接前往 Facebook 官方網站,這個決定權在"被嵌入進來的網頁"內的連結是否有使用「target=”_blank”」屬性,也就是超連結的"在新視窗開啟網頁"屬性。
本文转载自Wibibi
- HTML框架----frameset&iframe
- html iframe框架技术
- HTML内联框架iframe
- HTML iframe框架
- HTML 框架[frame&iframe]
- html 框架之Iframe用法
- HTML-iframe框架的应用
- Html的内联框架iframe
- html的内联框架iframe
- HTML内联框架-iframe标签
- XZ_HTML之HTML框架和 HTML内联框架 iframe
- iframe 标签 -- 代表HTML内联框架
- HTMl iframe框架退出到登录页面
- HTML中的Frame与Iframe框架属性
- 设置HTML中的Iframe框架自适应高度
- 【css与html】iframe框架代码
- (17)html框架之<iframe>
- HTML内联框架标签的使用 iframe
- poj3273(二分枚举)
- hdu1720
- TP框架学习笔记第一天
- 做一个串行执行的存储过程
- Android ScrollView 中放入 ImageView 导致的出现上下白边的问题?
- HTML iframe框架
- 【IMWeb训练营作业】 todoList
- android之自定义View和ViewGroup(六)(代码篇,实现简单的走势图,柱状图同理)
- Android WebView显示广告
- Hive的操作
- 2017中国虚拟现实教育创新大会暨第二届高校虚拟现实学科建设研讨会
- MySQL修改表结构
- ZOJ2405-Specialized Four-Digit Numbers
- 微信公众号验证token+关注回复+关键字回复+单图文回复