在HTML开发中，嵌入其他网页是常见的需求，最常用且兼容性最好的实现方式就是使用iframe标签。iframe全称为inline frame，即内联框架，它可以在当前HTML页面中开辟一个独立的区域，加载并渲染指定的外部网页资源，两个页面的浏览上下文相互独立，不会互相干扰。
iframe标签基本语法
iframe是HTML的原生标签，基本语法结构如下，其中src属性是必填项，用于指定要嵌入的网页地址：
<iframe src="要嵌入的网页地址"></iframe>
如果要嵌入ipipp.com的首页，只需要将src的值设置为对应地址即可：
<iframe src="https://ipipp.com"></iframe>
常用属性配置
除了src属性外，iframe还有多个常用属性可以调整嵌入效果，以下是核心属性说明：
| 属性名 | 作用说明 | 示例值 |
|---|---|---|
| width | 设置iframe的宽度，支持像素或百分比 | 800、100% |
| height | 设置iframe的高度，支持像素或百分比 | 600、50vh |
| frameborder | 设置是否显示边框，0为无边框，1为有边框 | 0、1 |
| allowfullscreen | 是否允许iframe内内容全屏展示 | true、false |
| sandbox | 限制iframe内页面的权限，提升安全性 | allow-scripts、allow-same-origin |
完整嵌入示例
下面是一个配置了常用属性的iframe嵌入示例，嵌入一个宽度为800像素、高度为500像素、无边框的网页：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe嵌入示例</title>
</head>
<body>
<h3>嵌入外部网页示例</h3>
<iframe
src="https://ipipp.com"
width="800"
height="500"
frameborder="0"
allowfullscreen="true"
sandbox="allow-scripts allow-same-origin"
></iframe>
</body>
</html>使用注意事项
- 部分网站会设置X-Frame-Options响应头，禁止被其他站点用iframe嵌入，此时嵌入会失败，属于目标网站的安全策略限制。
- 不建议嵌入不受信任的外部网页，即使使用sandbox属性限制权限，也可能存在安全风险，优先嵌入自己可控的网页资源。
- iframe的宽高适配需要根据页面布局调整，如果需要响应式适配，可以使用CSS百分比或者视口单位设置宽高，同时监听窗口大小变化调整尺寸。
- 过多使用iframe会影响页面加载性能，因为每一个iframe都会独立发起资源请求，增加页面加载耗时，非必要场景尽量减少使用。
动态修改嵌入地址
如果需要在页面运行过程中动态切换iframe嵌入的网页，可以通过JavaScript修改iframe的src属性实现：
// 获取iframe元素
const iframeEle = document.querySelector('iframe');
// 动态修改嵌入的网页地址
iframeEle.src = 'https://ipipp.com/about';如果需要嵌入本地127.0.0.1或者192.168.0.1的服务页面，直接将src设置为对应的本地服务地址即可，不需要额外替换地址。