使用iframe是html页面嵌套的推荐方法，支持跨域加载、属性灵活且兼容性好，常用属性包括src、width、height、frameborder和sandbox，可有效嵌入外部网页内容并提升安全性。
在HTML中实现页面嵌套，最常用的方法是使用 iframe 或 Object 标签。它们可以将另一个网页或资源嵌入当前页面中，适用于展示外部内容、广告、表单、视频等场景。
使用 iframe 嵌套页面（推荐方式）
iframe（inline frame）是最常见的嵌入方式，支持跨域加载网页，兼容性好，使用简单。
基本语法：
zuojiankuohaophpcniframe src=”https://example.com” width=”100%” height=”500″ frameborder=”0″>
您的浏览器不支持 iframe。 </iframe>
常用属性说明：
立即学习“前端免费学习笔记（深入）”；
- src：指定要嵌入的页面地址，可以是外部网址或本地文件
- width / height：设置嵌入区域的宽高，支持像素或百分比
- frameborder：是否显示边框，设为 0 可去除边框
- scrolling：控制是否显示滚动条（值为 yes/no/auto）
- sandbox：增强安全性，限制嵌入页面的权限（如禁止脚本执行）
示例：嵌入百度首页
<iframe src=”https://www.baidu.com” width=”800″ height=”600″ sandbox=”allow-same-origin allow-scripts”> 浏览器不支持 iframe。 </iframe>
使用 object 嵌套页面（替代方案）
object 标签更通用，不仅可以嵌入网页，还能加载PDF、Flash、图片等资源。
基本语法：
<object data=”https://example.com” type=”text/html” width=”100%” height=”500″> <p>您的浏览器不支持 object 标签。</p> </object>
常用属性说明：
立即学习“前端免费学习笔记（深入）”；
- data：指定嵌入资源的URL
- type：定义资源MIME类型，网页用 text/html
- width / height：设置显示区域大小
注意：object 在某些浏览器中对跨域网页支持不如 iframe 稳定，且样式控制较弱。
其他内容嵌入方法
除了 iframe 和 object，还有几种方式可实现内容复用或嵌入：
- javaScript 动态加载：通过 fetch 或 ajax 获取HTML片段插入到 div 中，适合局部内容嵌入
- Server-Side include (SSI)：服务器端包含，在php、node.js等后端语言中通过 include/require 引入HTML片段
- Web Components / Shadow dom：现代前端技术，可封装可复用的自定义元素
- 使用 link + rel=import（已废弃）：旧版HTML Imports功能已被主流浏览器弃用
iframe 安全与性能建议
虽然 iframe 使用方便，但也存在一些问题需要注意：
- 避免嵌入不可信来源的页面，防止xss攻击
- 合理使用 sandbox 属性限制权限
- 注意seo影响：搜索引擎通常不会索引 iframe 内容
- 移动端适配：设置 width=100% 并配合响应式设计
- 加载性能：过多 iframe 会增加页面请求和内存消耗
基本上就这些。日常开发中优先选择 iframe 实现页面嵌套，简单直接；若需嵌入非网页资源可考虑 object；对于静态内容复用，建议通过后端模板或前端组件化方式处理更高效。不复杂但容易忽略细节，比如安全设置和兼容性处理。