就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

Sign in with facebook

Connect with friends.

人氣: 6827|回復: 1

HTML iframe 崁入框架程式碼應用

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
2145
鮮花(68) 雞蛋(2)
累計在線
342789分鐘
發表於 2014-10-8 23:10:17 | 顯示全部樓層 |閱讀模式
  
0.jpg
HTML iframe 是框架的一種,也稱為內置框架或內聯框架,用來在網頁內嵌入另外一個網頁,例如現在非常流行的嵌入 Facebook 粉絲團到部落格或個人網站、在網站內容加上按讚或分享的按鈕都是常見的應用方式,HTML iframe 可以自己設定要嵌入的網頁所佔空間,如寬度與高度,也可以設定是否要顯示邊框或捲軸,幾乎所有主流的瀏覽器都支援 HTML iframe 框架語法。

HTML iframe 基本語法
  1. <iframe src="要嵌入的網頁網址"></iframe>
複製代碼
標準的 HTML iframe 框架語法是由 <iframe> 開始至 </iframe> 結束,開頭的 <iframe> 標籤內的 src 就是用來指定要嵌入的網頁網址,如果想要寫得更完整一點,可以在 <iframe> 與 </iframe> 間加入"瀏覽器不支援的提示文字",當網友使用的瀏覽器不支援 HTML iframe 時,可以顯示提示文字讓網友知道有一個部分的內容沒有顯示。

HTML iframe 框架寬度與高度設定
  1. <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 框架邊框顯示與隱藏
  1. <iframe src="要嵌入的網頁網址" frameborder="0"></iframe>
複製代碼
網頁設計本來的風格在嵌入另一個網頁後,很可能會對原本的視覺效果有所影響,其中突兀的邊框可以說是相當明顯,還好 iframe 有提供隱藏邊框的功能,範例中的 frameborder="0" 代表隱藏邊框,如果是 frameborder="1" 則代表顯示邊框。

HTML iframe 框架 scrolling 捲軸
  1. <iframe src="要嵌入的網頁網址" scrolling="no"></iframe>
複製代碼
既然是嵌入另一個網頁,就很可能會遇到網頁大小與主網頁的顯示區塊間的尺寸差異,嵌入的網頁可能很大或是內容很多,需要用到捲軸才方便,iframe 可以透過 scrolling 屬性來設定是否要顯示捲軸,scrolling 有三個屬性值,分別為 yes 代表要顯示捲軸、no 代表不顯示捲軸以及 auto 代表根據網頁大小自動顯示。

屬性混搭使用
  1. <iframe src="要嵌入的網頁網址" width="200" height="200" frameborder="0" scrolling="no"></iframe>
複製代碼
以上幾個常用的屬性,可以同時用在一個 iframe 框架的設計上,調整出最適合的嵌入尺寸與形態,假設全部屬性都用上去,寫起來大至會向範例這個模樣,意思代表要嵌入一個寬度與高度都是 200px 的框架,邊框與捲軸都不顯示。

關於 iframe 內容的另開新視窗方式

HTML iframe 是框架功能,目的僅為用來嵌入其他 URL 的內容,至於透過 iframe 嵌入進來的內容,若要讓網友可以用新視窗開啟,例如被嵌入至網頁或部落格的 Facebook 粉絲團,網友可以直接從網頁中的 Facebook粉絲團直接前往 Facebook 官方網站,這個決定權在"被嵌入進來的網頁"內的連結是否有使用「target="_blank"」屬性,也就是超連結的"在新視窗開啟網頁"屬性。

iframe 的功能可以在網頁內嵌入框架,來顯示另外一個網頁的內容,有的時候設計師會在被嵌入的網頁,加入其他的連結,這時候如何控制連結的目標就很重要,可以在框架內開啟新網頁、在父層開啟新網頁或者是直接另外開啟新視窗顯示,連結目標本身並非 iframe 的屬性,而是 HTML a href 連結屬性的範疇,設計師可以將兩者結合應用,用以決定 iframe 框架的的連結要用何種模式開啟。

iframe 連結目標
目標        定義
_blank
原本的視窗保留,另外開啟新視窗顯示連結網頁。
_self
在 iframe 框架內直接開啟,連結網頁的呈現範圍在 iframe 內。
_parent
在父層開啟連結網頁,直接取代原本的框架頁。

以下將透過 test1.html 嵌入包含三種不同連結目標的框架 test2.html。

iframe 連結開啟語法、test1.html
  1. <iframe src="test2.html" width="200" height="200" frameborder="1" scrolling="no"></iframe>
複製代碼
關於 iframe 的各個參數,請參閱:HTML iframe 框架。

iframe 連結開啟語法
、test2.html
  1. <a href="連結網址" target="_blank">另外開啟新視窗</a>
  2. <a href="連結網址" target="_self">在框架內開啟</a>
  3. <a href="連結網址" target="_parent">在父層開啟</a>
複製代碼
語法中的"連結網址"請自由設定,重點在於 target 的目標參數,這裡要稍微討論一下,如果要開啟的新連結網頁是自己本身的網頁,使用 _self 或 _parent 目標比較合理,若要開啟的是別人的網頁,則應該盡量使用 _blank 另外開一個新的視窗,以示尊重


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(68) 雞蛋(2)論壇版權

使用道具 舉報

新浪微博達人勛

總積分排名︰40
鮮花(1) 雞蛋(0)
累計在線
1526分鐘
發表於 2018-7-19 12:28:20 | 顯示全部樓層

顶顶,好东西就分享,支持楼主^^
看得透的人,處處是生機,看不透的人,處處是困境。 - 94i3Life.

就是愛尚生活 - 94i3Life - 歡迎您 加入 !

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸 Sign in with facebook

本版積分規則


快速回復 返回列表 聯繫我們 搜索

line|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2018-8-15 10:53 PM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2018 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享筆記平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重「論壇規則」、「論壇注意事項」,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請「聯絡我們」,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表