可通过iframe、JavaScript fetch、object标签、服务端包含（SSI）或ES6模块五种方法嵌入外部HTML文件：iframe最简单但隔离性强；fetch灵活可控但受同源限制；object语义明确但兼容性差；SSI需服务器支持且生成静态页；ES6模块适合现代构建环境。
如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而不是重复编写相同代码，则需要通过特定技术实现外部HTML文件的引用。以下是几种可行的方法：
一、使用iframe标签嵌入外部HTML文件
iframe元素可在当前页面中创建一个独立的嵌入窗口，直接加载并显示外部HTML文件的内容，无需服务器端处理，适用于静态内容展示。
1、在当前HTML文件的
区域内插入标签。
2、设置src属性为外部HTML文件的相对或绝对路径，例如src="header.html"。
立即学习“前端免费学习笔记（深入）”；
3、添加width和height属性以控制显示区域尺寸，如width="100%" height="200"。
4、可选：添加frameborder="0"去除边框，使用loading="lazy"优化加载性能。
二、使用JavaScript动态加载HTML片段
通过fetch API读取外部HTML文件内容，并将其插入到指定DOM元素中，适合需要灵活控制加载时机与位置的场景。
1、在目标位置添加一个具有唯一id的容器元素，例如
。
2、在页面底部或单独JS文件中编写异步请求代码：fetch('nav.html').then(r => r.text()).then(html => document.getElementById('nav-placeholder').innerHTML = html);。
3、确保外部HTML文件与当前页面同源，否则将触发跨域访问被阻止错误。
4、可在then()链中添加catch()处理网络失败情况，例如显示提示文本。
三、使用HTML5的object标签引入外部HTML
object标签原用于嵌入多媒体或插件资源，但部分浏览器也支持将其用于加载HTML文件，兼容性较iframe略低，但语义更接近“外部资源引用”。
1、在页面中插入。
2、确保type属性明确设为"text/html"，否则可能被忽略或解析为其他类型。
3、注意：Chrome 95+及新版Edge对object加载本地HTML文件存在限制，需部署在HTTP服务环境下才可正常工作。
4、可为添加子元素传递参数（部分浏览器支持），但实际效果依赖于浏览器实现。
四、服务端包含（SSI）方式引用
在支持SSI的Web服务器（如Apache）上，可通过特殊注释语法让服务器在响应前将外部HTML文件内容插入当前页面，生成纯静态输出，无客户端JavaScript依赖。
1、确认服务器已启用SSI模块，并配置.shtml为可解析扩展名。
2、将当前文件扩展名改为.shtml，例如index.shtml。
3、在需要插入位置写入注释：。
4、确保footer.html与当前文件位于同一目录下，否则使用virtual属性指定路径，如。
五、使用ES6模块动态导入HTML模板字符串
结合现代前端构建工具（如Vite、Webpack），可将HTML文件作为模块导入，在运行时生成DOM结构，适用于组件化开发流程。
1、在HTML文件所在目录创建template.html，仅保留纯HTML片段（不含、等根标签）。
2、在JS模块中使用import raw from './template.html?raw';语法（需构建工具支持raw插件）。
3、执行document.getElementById('main').insertAdjacentHTML('beforeend', raw);完成插入。
4、该方式要求构建环境配置正确，直接在浏览器中打开HTML文件将无法解析import语句。
以上就是html如何引用html文件_引用外部HTML文件到当前页面【必看教程】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605089.html
微信扫一扫 
支付宝扫一扫 
