HTML iframe
iframe是什麼？HTML iframe介紹｜天矽科技網頁設計
HTML的iframe標籤，是讓A網站能夠嵌入B網站的內容，比如嵌入YouTube影音到網站中、嵌入FB貼文到網站中…等，都是非常多人使用且常見的案例。
iframe是什麼
HTML中 的 iframe 標籤，全名為 inline frame 內嵌框架，它的作用是讓其他網站頁面能夠被放在另一個網站頁面裡面，達到在 A 網站卻能瀏覽 B 網站頁面的目的，比如被放在網站部落格資訊中的 YouTube 影音、Facebook 貼文或Google 地圖…等，這些都是 iframe 標籤來完成的。
它的長相會是這樣：
＜iframe src=http://www.example.com/＞＜/iframe＞
▲ Google地圖的嵌入語法
常用的iframe屬性
使用 iframe 標籤，通常還會再標籤中加入其他屬性，讓其嵌入能更加的完整，如下：
- src：指定要嵌入的網站頁面網址。
- height：設定嵌入區域的高度，使用像素(px)或百分比調整。
- wigth：設定嵌入區域的寬度，使用像素(px)或百分比調整。
- marginheight：設定嵌入區域頂部和底部的邊距，使用像素(px)調整。
- marginwidth：設定嵌入區域左側和右側的邊距，使用像素(px)調整。
- name：設定名稱。
- scrolling：設定嵌入區域是否顯示捲動條。
- frameborder：設定是否顯示嵌入區域框架四周的邊框。
- sandbox：
針對嵌入網頁開啟一些限制，如不設定則表示採用預設的限制，如 allow-forms 允許提交表單、allow-orientation-lock 允許鎖定螢幕方向、popups 允許彈跳視窗出現、allow-scripts 允許區塊執行 JS、allow-modals 允許開啟 modal 視窗、allow-pointer-lock 允許使用 Pointer Lock API…等。
使用iframe好嗎？
使用 iframe 好嗎？使用 iframe 的目的，是為了讓整體網站能看起來更加的豐富且讓網站的能實現更多的目的，使用者只要透過網站資訊就能獲得其他網站的資訊，讓資訊更好的同步且容易。
以最常且最多企業網站使用的影片為例，若網站需要提供影片給網站使用者觀看，無論是 Banner 的形象影片、操作說明的教學影片還是廣告宣傳影音內容，我們都不建議將影片直接使用 mp4 的方式直接放到網站中，如此作法會導致網站載入與開啟速度緩慢，因此建議透過嵌入第三方影音平台的方式，用 iframe 將影音嵌入網站即可增加載入速度、減少資源並提升開啟效率。
iframe缺點
雖然使用iframe內嵌網站能增加整體的豐富度是它的最大特色與優點，但事實上iframe也同樣是有缺點需要特別注意的。
- 搜尋引擎無法檢索iframe內容
使用 iframe 內嵌網頁，就要知道內嵌的網頁內容是沒有辦法被搜尋引擎檢索到的，因為搜尋引擎主要是搜尋網站中的所有資訊內容，再將檢索到的資訊提供給使用者，但是由於 iframe 內嵌網頁不屬於主要網頁生產的資訊，它是別的網域、網站所提供的內容，因此搜尋引擎是沒有辦法檢索 iframe 的內容的。
※ 如果你希望透過嵌入facebook貼文來提升SEO讓更多人找到你的網站，這種方式是沒有辦法的。 - iframe內嵌網頁有資安疑慮
由於 iframe 是嵌入「其他網頁中」的內容到自己的網站上，我們沒有辦法保證對方的網頁是否絕對安全，如果對方的網站不安全或是被惡意人士植入病毒或惡意程式，則此做法會增加資安風險。 - 畫面不統一且影響使用者體驗
由於 iframe 嵌入的網站非自家網站，對方有自己的設計風格，所以嵌入的畫面加上自家網站原本的設計，就會顯得畫面不協調、不統一。
另外，如果 iframe 嵌入的網站外框比例沒有設定好、對方網站沒有 RWD 響應式設計或對應方式，如此就會容易造成使用者的閱讀困難，並且連帶影響使用者對網站的好感度。
▲ 在網站中嵌入104人力銀行的頁面
