iframe 内嵌
iframe 嵌入网页/地图/视频、sandbox 安全属性、去除边框
iframe 内嵌页面
<iframe> 在当前页面中嵌入另一个 HTML 页面——地图、视频、广告都靠它。
学完本章你将： 掌握 iframe 嵌入网页/地图/视频、sandbox 安全属性。
基本用法
html
<iframe src="https://example.com"
width="600"
height="400"
title="内嵌页面">
</iframe>嵌入百度地图
html
<iframe src="https://map.baidu.com/"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>sandbox 安全属性
html
<!-- 严格模式：禁止所有危险操作 -->
<iframe src="untrusted.html" sandbox></iframe>
<!-- 允许部分操作 -->
<iframe src="widget.html"
sandbox="allow-scripts allow-same-origin">
</iframe>| sandbox 值 | 允许的操作 |
|---|---|
| （空） | 禁止一切 |
| `allow-scripts` | 运行 JS |
| `allow-same-origin` | 同源访问 |
| `allow-forms` | 提交表单 |
| `allow-popups` | 弹窗 |
去掉边框
html
<!-- 现代浏览器用 CSS -->
<iframe src="page.html" style="border: none;"></iframe>