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站视频
- 在同一页面嵌入两个不同的网站