Iframe 可嵌入外部网页，通过 src、width、height 等属性设置内容与尺寸，结合 title、sandbox、allowfullscreen 提升安全与体验，响应式布局需用 CSS 控制宽高比，但受 X-Frame-Options 限制，影响 SEO 与性能，需注意兼容性与安全性。
Iframe 是 HTML 中用于在当前页面中嵌入另一个网页的元素。通过使用 iframe，你可以在一个网页中显示来自其他网站或本地文件的内容，实现页面的嵌套展示。
基本语法
要使用 iframe 嵌入外部页面，最基本的写法如下：<iframe src="https://www.example.com" width="600" height="400"></iframe>
其中：- src：指定要嵌入的页面地址，可以是外部网址，也可以是本地 HTML 文件路径。
- width 和 height：设置 iframe 的宽度和高度，单位可以是像素（px）或百分比（%）。
常用属性说明
除了基础属性，iframe 还支持多个实用属性来优化用户体验：- title：为 iframe 添加描述性标题，有助于无障碍访问（推荐添加）。
- frameborder：控制边框是否显示，设为 "0" 可去除边框（现代浏览器中建议用 CSS 替代）。
- allowfullscreen：允许全屏显示，常用于嵌入视频或地图。
- sandbox：增加安全性，限制嵌入页面的权限，例如禁止表单提交或脚本执行。
示例代码：
<iframe src="https://www.example.com"
width="100%"
height="500"
title="嵌入的外部页面"
frameborder="0"
allowfullscreen
sandbox="allow-same-origin allow-scripts">
</iframe>
响应式设置方法
为了让 iframe 在不同设备上正常显示，建议使用 CSS 实现响应式布局。可以通过设置外层容器的宽高比，并结合 CSS 来自适应屏幕大小：
HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="iframe-container">
<iframe src="https://www.example.com" title="响应式嵌入页面" frameborder="0" allowfullscreen></iframe>
</div>
CSS：
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 宽高比 */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意事项与限制
使用 iframe 时需注意以下几点：- 部分网站通过 X-Frame-Options 或 Content-Security-Policy 头部阻止被嵌入，此时 iframe 会显示为空或提示拒绝访问。
- SEO 不友好：搜索引擎通常不会索引 iframe 内容，不利于页面优化。
- 性能影响：加载额外页面可能拖慢主页面速度。
- 移动端适配问题：某些嵌入内容在手机上可能无法良好显示，需测试兼容性。
基本上就这些。正确使用 iframe 能有效整合外部资源，但要注意安全和体验平衡。
