HTML <iframe> 內嵌框架 (Inline Frame)

<iframe> 標籤 (inline frame) 是所謂的內嵌框架 (內聯框架)，用來在一個 HTML 網頁裡面嵌入另外一個 HTML 網頁，像是常見的在部落格裡面用 iframe 語法嵌入 Facebook 的粉絲專頁或按讚按鈕外掛。

舉個例子，我用 iframe 在下方嵌入本站的首頁：

<iframe src="http://www.fooish.com/">
  你的瀏覽器不支援 iframe
</iframe>

顯示結果：

但一般如果不是用來嵌入外站的內容，還是盡量少用 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 的父層視窗，如果是使用者手動去點擊的話