跳到主要内容

嵌入元素

iframe 元素如何嵌入网页？​

  • 语义: 在当前文档中嵌入另一个网页;
  • src: 必填, 被嵌入网页的 URL;
  • title: 描述该框架的内容;
  • allowfullscreen: 是否允许全屏;
  • sandbox: 启用沙盒模式, 限制被嵌入页面的能力;
<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300"
  allowfullscreen
  sandbox
></iframe>

object 元素如何嵌入外部资源？​

  • 语义: 嵌入任意外部资源;
  • data: 必填, 外部资源 URL;
  • type: 必填, 资源的 MIME 类型;
<object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"></object>

embed 元素如何嵌入外部资源？​

  • 语义: 与 object 类似的资源嵌入, 属性更少;
  • src: 必填, 外部资源 URL;
  • type: 必填, 资源的 MIME 类型;
<embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video" />

object 与 embed 如何选择以保证兼容？​

  • object: 历史上对 IE 支持更好;
  • embed: HTML5 标签, 面向现代浏览器;
  • 兼容写法: 把 embed 嵌套在 object 内, 让不识别 embed 的浏览器回退到 object;
<object type="video/quicktime" data="movie.mov" width="640" height="480">
  <embed type="video/quicktime" src="movie.mov" width="640" height="480" />
</object>