Skip to content

Latest commit

 

History

History
107 lines (74 loc) · 6.73 KB

HTML iframe 标签.md

File metadata and controls

107 lines (74 loc) · 6.73 KB

HTML iframe 标签

HTML iframe 标签用于在网页中嵌入另一个网页。

从技术上讲,iframe 创建了一个新的嵌套浏览上下文。这意味着 iframe 中的任何内容都不会干扰父页面,反之亦然。JavaScript 和 CSS 不会泄漏到 iframe 或从 iframe 中泄漏。

许多网站使用 iframe 执行各种操作。你可能熟悉 CodePenGlitchCodeSandbox 或其他允许你在页面的某个部分编码的网站,并在一个框中看到结果。那个框便是 iframe

你可以这样创建:

<iframe src="page.html" />

你也可以加载绝对 URL:

<iframe src="https://example.com/page.html" />

你可以设置一组 widthheight 参数(或使用 CSS 设置),否则 iframe 将使用默认值,即 300 x 150 像素的框:

<iframe src="page.html" width="800" height="400" />

Srcdoc

srcdoc 属性允许你指定一些要显示的内联 HTML。它是 src 的替代品,但完全不支持 IE 浏览器

<iframe srcdoc="<p>Hello iframe!</p>" />

Sandbox

sandbox 属性允许我们限制 iframe 中允许的操作。

如果我们省略它,一切都是允许的:

<iframe src="page.html" />

如果我们将其设置为 ''(空),则不允许:

<iframe src="page.html" sandbox="" />

我们可以通过在 sandbox 属性中添加选项来选择允许的内容。你可以通过在中间添加空格来允许多个。以下是你可以使用的选项的不完整列表:

  • allow-forms 允许提交表单
  • allow-modals 允许打开模态窗口,包括在 JavaScript 调用 alert()
  • allow-orientation-lock 允许锁定屏幕方向
  • allow-popups 允许弹出窗口、使用 window.open()target="_blank" 链接
  • allow-same-origin 将正在加载的资源视为同一来源
  • allow-scripts 让加载的 iframe 运行脚本(但不创建弹出窗口)。
  • allow-top-navigation 允许访问 iframe 以访问顶级浏览上下文

Allow

目前只是实验性的,并且只支持基于 Chromium 的浏览器,这是父窗口和 iframe 之间资源共享的未来。

它类似于 sandbox 属性,但允许我们使用特定的功能,包括:

这些都是实验性,完整内容查看 👉 特征策略

Referrer

加载 iframe 时,浏览器会在 Referer 标题中向其发送有关谁正在加载它的重要信息(请注意单个 r,我们必须忍受的拼写错误)。

wiki:Referer 的正确英语拼法是 referrer。这是早期 HTTP 规范当中存在的拼写错误,后来为保持向下兼容将错就错。

referrerpolicy 属性允许我们设置在加载时发送到 iframe 的 referrer。referrer 是一个 HTTP 头,让页面知道谁在加载它。以下是允许的值:

  • no-referrer 不发送 referrer 标头
  • no-referrer-when-downgrade 是默认值,即当前页面通过 HTTPS 加载,并且 iframe 在 HTTP 协议上加载时发送 referrer 来源网址
  • origin 发送 referrer 来源网址,仅包含来源(端口、协议和域),而不包含默认来源和路径
  • origin-when-cross-origin 当从 iframe 中的同源(端口、协议、域)加载时,referrer 以其完整形式(来源 + 路径)发送。否则只发送原点
  • same-origin 仅当从 iframe 中的同源(端口、协议、域)加载时,才会发送 referrer 来源网址
  • strict-origin 如果当前页面通过 HTTPS 加载,并且 iframe 也通过 HTTPS 协议加载,那么发送源作为 referrer。如果 iframe 通过 HTTP 加载,则不发送任何内容
  • strict-origin-when-cross-origin 在同源上工作时,将来源和路径作为 referrer 发送。如果当前页面通过 HTTPS 加载,并且 iframe 也通过 HTTPS 协议加载,那么发送源作为 referrer。如果 iframe 通过 HTTP 加载,则不发送任何内容
  • unsafe-url 即使从 HTTP 加载资源,并且当前页面是通过 HTTPS 加载的,也会将源和路径作为 referrer 发送

更多资料