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 的內容更改頂級文件的位置。 |