推荐使用JavaScript动态加载HTML片段或iframe嵌入：前者通过fetch获取外部HTML并注入DOM，可控性强；后者以独立窗口形式嵌入，适合隔离模块。HTML Imports已废弃，SSI和构建预处理需服务器或构建环境支持。
如果您希望在HTML页面中嵌入另一个HTML文件的内容，而不依赖服务器端动态处理，则需要借助客户端技术实现静态引入。以下是几种可行的方法：
一、使用iframe标签嵌入HTML文件
iframe允许将外部HTML文档以独立窗口形式嵌入当前页面，内容与主页面隔离，适合展示独立模块或第三方内容。
1、在目标位置插入标签，并设置src属性指向待引入的HTML文件路径。
2、通过width和height属性设定显示区域尺寸，避免出现滚动条可添加scrolling="no"（部分浏览器已弃用）或使用CSS控制。
立即学习“前端免费学习笔记（深入）”；
3、为提升可访问性与SEO兼容性，应在内添加title属性描述其功能，例如title="页脚内容"。
4、若引入文件与当前页面同域，可通过JavaScript访问其内部DOM；跨域时受同源策略限制，无法读取内容或执行脚本。
二、利用JavaScript动态加载HTML片段
通过fetch或XMLHttpRequest请求外部HTML文件，再将响应文本注入指定容器元素，适用于需控制加载时机与位置的场景。
1、在页面底部或DOMContentLoaded事件中，创建一个
作为内容插入点。
2、使用fetch('header.html')发起GET请求，确保路径正确且服务器允许跨源（如为本地file://协议，需启用本地服务）。
3、调用.then(response => response.text())获取HTML字符串，再用document.getElementById('include-target').innerHTML = htmlText写入。
4、注意：直接写入innerHTML会丢失原HTML中的script标签执行能力，需手动eval或重新创建并插入script节点。
三、采用HTML Imports（已废弃，仅限历史兼容说明）
HTML Imports曾是W3C草案中用于导入HTML文档的原生机制，但已被现代浏览器移除支持，仅可在旧版Polymer项目中见到。
1、曾使用语法声明依赖。
2、导入后需通过import.querySelector()提取内容并手动附加到DOM中。
3、Chrome 73起完全移除该特性，Firefox与Safari从未实现，当前不可用于生产环境。
四、使用服务器端包含（SSI）模拟静态引入
虽名为“服务器端”，但在支持SSI的轻量服务器（如Apache启用includes模块）中，可通过特殊注释指令实现类静态行为，部署后效果等同于合并文件。
1、将主HTML文件扩展名改为.shtml（如index.shtml）。
2、在需插入位置写入，路径为相对于当前文件的本地路径。
3、启动支持SSI的本地服务器（如python3 -m http.server --cgi不支持，需用Apache或LiteSpeed）。
4、浏览器直接打开.shtm文件无效，必须经由支持SSI的Web服务器解析后返回结果。
五、构建时预处理：使用静态站点生成器或构建工具
在开发阶段将多个HTML片段合并为单个输出文件，生成结果为纯静态HTML，无需运行时逻辑，适合内容稳定、更新频率低的网站。
1、选用工具如Hugo、Jekyll或Webpack配合html-webpack-plugin与ejs-loader。
2、将公共部分（如头部、导航）保存为单独的_header.html模板文件。
3、在主页面中使用模板语法引用，例如（EJS）或{% include _header.html %}（Jekyll）。
4、最终输出为无任何依赖的单一HTML文件，但修改片段后必须重新运行构建命令才能生效。
以上就是html如何静态引入html_静态引入HTML文件内容方式【方式】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604816.html
微信扫一扫 
支付宝扫一扫 
