(HTML)- < iframe >參數用法與優缺點 — 學習筆記 ( 1 )

(HTML)- < iframe >參數用法與優缺點 — 學習筆記 ( 1 )

(HTML)- < iframe >參數用法與優缺點 — 學習筆記 ( 1 )

< iframe >參數與使用的方法。

 

一、什麼是 HTML < iframe >

< iframe > 即是 HTML 語法中的內嵌框架(inline frame),可以在一個網頁 ( HTML ) 中建立獨立區域,將另一個網頁 ( HTML ) 嵌入其中,像是常見的在部落格裡面用 iframe 語法嵌入 Facebook 和 YouTube 中。

 

< iframe src = " http://www.xxxx.com/ " >

< /iframe >

 

PS:一般如果不是用來嵌入外站的內容,還是盡量少用 iframe,因為 iframe 還是對網頁效能、維護性和 SEO 有非正面的影響。

 

二、< iframe > 標籤的屬性 ( attributes )

src: 指定要被嵌入的網頁的網址 (URL)

height: 指定 iframe 的高度,單位為像素 (pixel)

width: 指定 iframe 的寬度,單位為像素 (pixel)

name: 指定 iframe 的名稱

sandbox: 當有這屬性時,表示針對 iframe 裡面的網頁啟用一些限制條件,屬性值如果留空表示啟用所有限制,當有設定值的時候表示移除這些限制,你可以用空格設定移除多個限制條件。可以用的值有:

allow-forms: 允許提交表單

allow-modals: 允許打開 modal 視窗

allow-orientation-lock: 允許鎖定螢幕方向,像是智慧型手機的水平朝向或垂直朝向

allow-pointer-lock: 允許使用 Pointer Lock API

allow-popups: 允許彈跳視窗,像是可以用 target=”_blank”

allow-popups-to-escape-sandbox: 允許彈跳視窗不繼承 sandbox 的設定

allow-presentation: 允許開啟 presentation session

allow-same-origin: 允許將 iframe 的內容視作 same origin

allow-scripts: 允許 iframe 內容可以執行 JavaScript

allow-top-navigation: 允許 iframe 可以將內容載入到 top level 的父層視窗,像是可以用 target=”_top”

allow-top-navigation-by-user-activation: 允許 iframe 可以將內容載入到 top level 的父層視窗,如果是使用者手動去點擊的話

 

三、< iframe > 的優缺點

優點:

使用iframe可以讓單一頁面擁有多樣內容,呈現來自其他網域的網頁內容,豐富網站瀏覽版面。

 

缺點:

1. 增加載入速度

在頁面中使用iframe,將延阻onload事件的載入速度,佔據網頁讀取資源,使網站伺服器要額外花時間傳輸頁面內容。尤其越舊的瀏覽器,能同時加載的容量越少,建議採用JavaScript語法,動態添加iframe內容。

 

2. 搜尋引擎演算法無法檢索

搜尋引擎在爬取網頁時,無法檢索由iframe嵌入的網頁內容,換句話說該區域將無法被搜尋引擎解讀。

 

3. 嵌入頁面可能成為資安破口

利用iframe嵌入其他頁面內容,在無法確認他網頁面是否安全的情況下,很容易被不肖人士植入電腦病毒或木馬等惡意程式,增加資安破口。

 

4. 影響使用者體驗

iframe嵌入的內容會擠壓本身頁面的版位,造成閱讀不易,且較少行動裝置可對應 < iframe > 內容,容易影響使用者體驗。

 

四、在 WordPress 使用 < iframe >,能幫助網站提升 SEO 表現嗎?

由於搜尋引擎的檢索機器人無法檢索 <iframe > 的內容,設置 <iframe > 其實對於網站 SEO 沒有實質影響,如要讓搜尋引擎訪問 <iframe > ,可以在 robot.txt 內設定,更新至網站後台,檢索機器人就會瞭解 <iframe > 內容來自其他頁面。

 

 

 

免責聲明:

1.本影像檔案皆從網上搜集轉載,不承擔任何技術及版權問題。

2.如有下載連結僅供寬頻測試研究用途,請下載後在24小時內刪除,請勿用於商業。

3.若侵犯了您的合法權益,請來信通知我們,我們會及時刪除,給您帶來的不便,深表歉意。



發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *