当前位置：首页 > 文章列表 > 文章 > 前端 > HTML引用其他HTML页面常用的方法有以下几种，具体取决于你的需求和使用场景：1.**使用<iframe>标签（内联框架）<iframe>可以直接将一个HTML页面嵌入到当前页面中。<iframesrc="目标页面.html"width="100%"height="500px"></iframe>优点：简单、快速。缺点：不能直接操作被引用页面的内容

HTML引用其他HTML页面常用的方法有以下几种，具体取决于你的需求和使用场景：1.**使用<iframe>标签（内联框架）<iframe>可以直接将一个HTML页面嵌入到当前页面中。<iframesrc="目标页面.html"width="100%"height="500px"></iframe>优点：简单、快速。缺点：不能直接操作被引用页面的内容

2026-03-10 10:58:34 0浏览收藏

在HTML中“引用”另一个HTML文件并无原生标准方案，实际开发需根据场景权衡：iframe虽简单但存在滚动、SEO、脚本隔离等严重缺陷，仅适合原型或完全隔离的第三方嵌入；fetch + innerHTML是当前最主流的动态加载方式，兼容性好、控制力强，但需手动处理脚本执行和路径解析；真正意义上的“引用”其实依赖服务端（如Nginx include、PHP include）或构建时预处理（Webpack、Hugo等），它们在发布前完成内容合并，兼顾性能与可维护性；而HTML Modules等实验性方案尚不成熟，无法用于生产。选择的关键不在技术炫酷，而在于厘清需求本质——是优化开发效率（选构建时include），还是实现运行时动态更新（选fetch+精细管控）。

iframe 是最简单但最不推荐的引用方式

直接用 </code> 嵌入另一个 HTML 文件，浏览器能立刻渲染，但会带来一堆隐性问题：父页面滚动条可能失控、<code>document.title</code> 和 <code>history.pushState</code> 不同步、SEO 几乎为零、移动端手势（比如双指缩放）容易冲突。</p> <p>常见错误现象：<code>iframe</code> 高度固定导致内容被截断、父页面点击事件无法穿透、加载后 JS 作用域隔离导致调用失败。</p> <ul><li>只在原型演示或完全隔离的嵌入场景（如第三方 widget）中考虑它</li> <li>务必设置 <code>sandbox</code> 属性限制权限，避免安全风险</li> <li>如果必须用，用 JS 动态计算 <code>iframe</code> 内容高度并同步设置 <code>height</code> 样式</li> </ul><h3>fetch + innerHTML 是现代前端最常用的动态加载方案</h3> <p>用 <code>fetch()</code> 请求目标 HTML 文件，拿到字符串后插入到指定容器里，再手动执行其中的 <code><script></code> 标签——这是目前兼容性好、可控性强的主流做法。</p> <p>使用场景：单页应用中局部刷新、CMS 系统中模块化内容区块、需要复用头部/侧边栏但又不想服务端渲染的项目。</p> <ul><li><code>fetch('header.html')</code> 返回的是纯文本，不能直接 <code>append()</code>，得先用 <code>innerHTML = responseText</code></li> <li>原 HTML 中的 <code><script></code> 不会自动执行，需提取并用 <code>eval()</code> 或创建新 <code><script></code> 标签注入（注意 CSP 限制）</li> <li>相对路径在子 HTML 中会以当前页面 URL 为基准解析，不是以被加载文件位置为准</li> </ul><h3>服务器端 include 或构建时预处理才是真正“引用”的解法</h3> <p>浏览器本身不支持原生 HTML 文件间引用，所谓“引用”本质是服务端拼接或构建工具提前合并。想让 <code>index.html</code> “包含” <code>nav.html</code>，必须靠外部介入。</p> <p>参数差异：Nginx 的 <code>include</code> 指令要求文件在同一目录且无缓存干扰；Webpack 的 <code>html-webpack-plugin</code> + <code>html-loader</code> 支持 <code><%= require('./nav.html') %></code> 这类写法；PHP 则直接 <code>include 'nav.html';</code>。</p> <ul><li>Node.js 开发常用 <code>express.static</code> 配合中间件做运行时 include，但性能不如构建时处理</li> <li>静态站点生成器（如 Hugo、Jekyll）把 include 当核心功能，语法更自然，但脱离构建流程就失效</li> <li>注意文件编码统一为 UTF-8，否则 <code>include</code> 后出现乱码几乎不可避免</li> </ul><h3>import map + HTML Modules（实验性）目前基本不能用</h3> <p>Chrome 120+ 支持通过 <code><script type="importmap"></code> 声明模块映射，再用 <code>import</code> 加载 HTML 文件作为模块，但这是 HTML Modules 提案的一部分，尚未标准化，Firefox/Safari 完全不支持。</p> <p>错误信息示例：<code>Failed to resolve module specifier "nav.html". Relative references must start with either "/", "./", or "../".</code> 就是因为没配 import map 或路径不合法。</p> <ul><li>即使开启实验标志，<code>import './nav.html' assert { type: 'text/html' }</code> 返回的是 <code>Response</code> 对象，仍需手动解析</li> <li>当前阶段仅适合技术验证，别放进生产环境</li> <li>依赖构建工具（如 Vite 插件）才能模拟类似行为，本质还是 fetch + 注入</li> </ul> 实际项目里，90% 的“引用 HTML”需求最后都落在构建时处理或 fetch 动态加载上。关键不是选哪个方案，而是明确你要解决的是开发体验问题（比如不想重复写 header），还是运行时逻辑问题（比如用户操作后局部换内容）。前者优先考虑构建工具，后者必须自己管好脚本执行时机和作用域。<p>今天关于《HTML引用其他HTML页面常用的方法有以下几种，具体取决于你的需求和使用场景：1.**使用<iframe>标签（内联框架）<iframe>可以直接将一个HTML页面嵌入到当前页面中。<iframesrc="目标页面.html"width="100%"height="500px">优点：简单、快速。缺点：不能直接操作被引用页面的内容，SEO不友好。2.使用JavaScript动态加载内容（如fetch或XMLHttpRequest）你可以通过JavaScript获取另一个HTML文件的内容，并将其插入到当前页面中。

优点：可动态加载，SEO更好。缺点：需要服务器支持跨域访问（如果跨域的话），且不适用于所有浏览器。3.使用服务器端包含（ServerSideInclude,SSI）或模板引擎（如PHP、JSP、ASP）如果你的网站是用后端语言开发的，可以使用服务器端代码来引入其他HTML页面。示例（PHP）：


                
                                    
                                
                                        
                        
                            学海扬帆创佳绩攻略分享                        
                        
                            上一篇
                            学海扬帆创佳绩攻略分享
                        
                    
                                        
                        
                            
                        
                        
                            下一篇
                            快手删除已发布视频的完整教程


                
            
                
                    查看更多
                    最新文章
                
            
            
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  8小时前  |  

                                                  
                            
                            
                                前端状态更新频繁时，批处理与去抖分别解决什么
                            
                            
                                227浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  10小时前  |  

                                                                        前端 ·
                                                                          可访问性 ·
                                                                                   焦点陷阱
                                                                                             HTML dialog
                                                                                             焦点恢复
                                                                                             inert
                                                                                             无障碍弹窗
                                                              
                            
                            
                                可访问弹窗的焦点陷阱、关闭恢复与背景隔离
                            
                            
                                309浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  12小时前  |  

                                                                        前端 ·
                                                                          性能优化 ·
                                                                          javascript ·
                                                                                   ArrayBuffer
                                                                                             postMessage
                                                                                             前端性能
                                                                                             Web Worker
                                                                                             Transferable
                                                                                             structured clone
                                                              
                            
                            
                                Web Worker 传大数据为何卡顿：复制与 Transferable 对比
                            
                            
                                220浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  14小时前  |  

                                                                                 请求超时
                                                                                             Fetch
                                                                                             AbortController
                                                                                             AbortSignal
                                                                                             用户取消
                                                                                             前端异常处理
                                                              
                            
                            
                                Fetch 请求取消后，超时与用户中断要怎样区分
                            
                            
                                466浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  16小时前  |  

                                                                        文件上传 ·
                                                                          javascript ·
                                                                          前端开发 ·
                                                                                   大文件上传
                                                                                             断点续传
                                                                                             XMLHttpRequest
                                                                                             Blob.slice
                                                                                             前端分片上传
                                                                                             暂停上传
                                                              
                            
                            
                                前端上传大文件：分片、暂停与失败续传怎样协作
                            
                            
                                371浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  19小时前  |  

                                                                                 列表详情
                                                                                             View Transition API
                                                                                             前端渐进增强
                                                              
                            
                            
                                View Transition API 做列表到详情过渡的渐进增强
                            
                            
                                385浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  21小时前  |  

                                                  
                            
                            
                                用 CSS Container Query 让卡片按容器而不是视口响应
                            
                            
                                289浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  23小时前  |  

                                                                                 环境变量
                                                                                             vite
                                                                                             loadEnv
                                                                                             vite.config
                                                              
                            
                            
                                Vite 环境变量为什么在配置加载时取不到
                            
                            
                                133浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  1天前  |  

                                                  
                            
                            
                                React useOptimistic 怎么在请求失败时回滚列表
                            
                            
                                153浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  1天前  |  

                                                                        前端开发 ·
                                                                                   前端路由
                                                                                             hostname
                                                                                             URLPattern
                                                                                             pathname
                                                              
                            
                            
                                URLPattern 怎么同时匹配域名和路径参数
                            
                            
                                108浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  1天前  |  

                                                                        javascript ·
                                                                                   JavaScript
                                                                                             Intl.DurationFormat
                                                                                             前端国际化
                                                                                             持续时间格式化
                                                              
                            
                            
                                Intl.DurationFormat 怎么本地化显示持续时间
                            
                            
                                141浏览
                                收藏
                            
                        
                    
                
                                
                    
                        
                            
                        
                        
                            
                  
                                                                文章 ·
                                                                            前端
                                                       |  1天前  |  

                                                                        前端开发 ·
                                                                          浏览器API ·
                                                                                   postMessage
                                                                                             MessageChannel
                                                                                             Web Worker
                                                                                             MessagePort
                                                              
                            
                            
                                postMessage 转移 MessagePort 后原端口还能用吗
                            
                            
                                477浏览
                                收藏