IFrame

iframe 用於在當前 HTML 文件中嵌入另一個文件。

你可以使用 iframe 進行顯示:

  • 同一域上的其他 HTML 頁面;
  • 另一個域上的其他 HTML 頁面(參見下文 - 同源策略);
  • PDF 文件(雖然 IE 可能有一些問題,這個問題可能會有所幫助);

你應該使用 iframe 作為最後的手段,因為它有書籤和導航的問題,除了 iframe 總有更好的選擇。這個問題應該可以幫助你更多地瞭解 iframe 的起伏。

同源政策

某些網站無法使用 iframe 顯示,因為它們會強制實施名為 Same-origin policy 的策略 。這意味著 iframe 所在的站點必須與要顯示的站點位於同一個域中。

此策略還適用於操作 iFrame 內部的內容。如果 iFrame 正在訪問其他域中的內容,你將無法訪問或操作 iFrame 內的內容。

W3C 上的 iframe 元素

sandbox 屬性

sandbox 屬性在設定時會為 iframe 新增額外的限制。空格分隔的令牌列表可用於放寬這些限制。

細節
allow-forms 允許提交表單。
allow-pointer-lock 啟用 JavaScript 指標 API。
allow-popups 可以使用 window.open<a target="_blank" 建立彈出視窗
allow-same-origin iframe 文件使用其真實來源而不是給予唯一的。如果與 allow-scripts 一起使用,iframe 文件可以刪除所有沙盒,如果它來自與父文件相同的原點。
allow-scripts 啟用指令碼。iframe 文件和父文件可以使用 postMessage() API 相互通訊。如果與 allow-same-origin 一起使用,iframe 文件可以刪除所有沙盒,如果它來自與父文件相同的原點。
allow-top-navigation 允許 iframe 的內容更改頂級文件的位置。