基本用法

<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。

  1. <iframe src="https://www.example.com"
  2.         width="100%" height="500" frameborder="0"
  3.         allowfullscreen sandbox>
  4.   <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
  5. </iframe>

上面的代码在当前网页嵌入https://www.example.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。

浏览器普遍支持<iframe>，所以内部的子元素可以不写。

<iframe>的属性如下。

  • allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。
  • frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。
  • src：嵌入的网页的 URL。
  • width：显示区域的宽度。
  • height：显示区域的高度。
  • sandbox：设置嵌入的网页的权限，详见下文。
  • importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。
  • name：内嵌窗口的名称，可以用于<a>、<form>、<base>的target属性。
  • referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<a>标签的介绍。