(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.若侵犯了您的合法權益，請來信通知我們，我們會及時刪除，給您帶來的不便，深表歉意。