页面里嵌一块地图、嵌一个第三方播放器，或者老项目里整个后台面板都是框架套框架，靠的都是iframe。这个标签的属性不算多，但有几个很容易踩坑，挨个过一遍。

控制显示的基础iframe属性

最简单的写法长这样：

<iframe src='https://www.example.com/page.html' width='600' height='400'></iframe>

src指定要嵌入的页面地址，width和height控制尺寸，可以写像素值，也可以写100%让宽度撑满容器。这两个尺寸属性只是默认值，响应式布局里更常见的做法是CSS把iframe设成width:100%，高度按内容比例算。另外HTML5已经去掉了frameborder和scrolling这两个老属性，边框现在用CSS的border:none去掉，滚动条交给overflow控制。

和安全相关的属性

嵌别人的页面是有风险的，所以现代浏览器给iframe准备了sandbox属性：加上之后，嵌进来的页面默认不能执行脚本、不能弹窗、不能提交表单，要放行哪项就用值明确写出来，比如sandbox='allow-scripts'。referrerpolicy则用来控制向对方发送的来源信息。

控制加载行为的属性

  • loading='lazy'：让iframe滚动到视口附近才加载，首屏有嵌入内容时提速明显。
  • name：给框架起名字，form或a标签的target指向它，提交结果就会显示在iframe里。
  • title：用一句中文描述这个框架的用途，屏幕阅读器依赖它，无障碍检查工具一般都会提示补上。
  • allow='fullscreen'：允许嵌入页请求全屏，视频播放器场景常用。

最后提两个比属性更容易出问题的地方：一是子页面想调父页面的方法，两个页面必须同源，跨域时浏览器会直接拦掉并报错；二是iframe会完整加载一份文档，页面里堆太多会明显变卡，能用组件拆分就别用框架嵌套。