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 的内容更改顶级文档的位置。