HTML iframe 内嵌框架
学习用 iframe 嵌入其他网页 · 难度：进阶 · +15XP
HTML iframe 内嵌框架
<iframe>可以在当前页面中嵌入另一个网页。比如嵌入地图、视频、其他网站的内容。
基本用法
<iframe src="https://www.example.com" width="600" height="400" title="示例页面"></iframe>常用属性
| 属性 | 作用 |
|---|---|
src | 要嵌入的网页URL |
width/height | 宽高（像素或百分比） |
title | 描述（无障碍访问必需） |
frameborder | 边框（0去掉边框） |
allowfullscreen | 允许全屏 |
loading="lazy" | 延迟加载（性能优化） |
sandbox | 安全沙箱限制 |
实际应用
<!-- 嵌入B站视频 -->
<iframe src="https://player.bilibili.com/player.html?bvid=BV1xx"
width="100%" height="400" allowfullscreen></iframe>
<!-- 嵌入地图 -->
<iframe src="https://map.baidu.com/..." width="100%" height="300"></iframe>
安全注意事项
- 只嵌入可信网站
- 被嵌入的网站可能通过
X-Frame-Options禁止被嵌入 - 敏感页面（如银行）不要嵌入
???? 练习
- 创建一个页面，用iframe嵌入B站视频
- 在同一页面嵌入两个不同的网站