可在HTML中通过iframe、JavaScript动态加载、服务端包含（SSI）或构建工具、object标签四种方法引入外部HTML文件，HTML Imports已废弃。
如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而非重复编写相同代码，则需要借助特定技术实现外部HTML文件的引入。以下是几种可行的方法：
一、使用iframe标签嵌入外部HTML
iframe标签可在当前页面中创建一个独立的内联框架，并加载指定URL的HTML内容。该方法无需JavaScript支持，兼容性高，但会以独立文档上下文运行，样式和脚本默认不与主页面共享。
1、在需要插入外部HTML的位置添加iframe元素。
2、设置iframe的src属性为外部HTML文件的相对或绝对路径，例如：src=”header.html”。
立即学习“前端免费学习笔记（深入）”；
3、通过width和height属性控制显示区域尺寸，或使用CSS进一步定制边框、滚动条等外观。
4、可添加title属性提升可访问性，例如：title=”页面头部内容”。
二、使用JavaScript动态加载HTML片段
通过fetch API获取外部HTML文件的文本内容，再将其注入到指定DOM容器中。该方法允许对加载内容进行处理，且能与主页面共享CSS和JS作用域（取决于插入方式）。
1、在HTML中定义一个空容器，例如：
。
2、在script标签或外部JS文件中调用fetch函数请求外部HTML文件路径。
3、使用response.text()获取响应体字符串。
4、将返回的HTML字符串赋值给容器元素的innerHTML属性。
5、确保脚本在DOM加载完成后执行，例如包裹在DOMContentLoaded事件监听器中。
三、使用HTML5 import（已废弃，仅作说明）
HTML Imports曾是W3C提出的通过link标签引入HTML文档的机制，但已被所有主流浏览器弃用，不再推荐使用，也不具备向后兼容性。
1、曾使用的语法为：。
2、需通过JavaScript读取link元素的import属性获取内容。
3、现代项目中必须避免使用此方法，因其已从Chrome 73起被完全移除，Firefox与Safari从未实现。
四、服务端包含（SSI）或构建工具预处理
在服务器响应前将外部HTML文件内容合并进主HTML中，生成静态输出。该方式不依赖客户端能力，最终发送给浏览器的是单一完整HTML文档。
1、启用Web服务器的SSI功能（如Apache需开启includes模块并配置.shtml扩展）。
2、将主文件扩展名改为.shtml，插入语句：。
3、若使用Webpack、Vite等现代构建工具，可通过插件（如html-webpack-plugin配合ejs模板）实现类似效果。
4、注意：纯静态托管环境（如GitHub Pages、Netlify静态部署）默认不支持原生SSI，需依赖构建时处理。
五、使用object标签替代iframe进行轻量嵌入
object标签可用于嵌入外部HTML资源，行为与iframe接近，但在部分旧浏览器中具有不同默认样式和交互逻辑，适合作为iframe的备选方案。
1、在目标位置插入object元素，设置data属性指向外部HTML文件路径。
2、指定type属性为”text/html”，例如：type=”text/html”。
3、设置width和height属性以控制尺寸，否则可能默认显示为0×0。
4、可添加fallback内容作为子元素，当object无法加载时显示，例如一段提示文字。
以上就是html 如何引入html_在HTML页面中引入外部HTML文件【外部】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604924.html
微信扫一扫 
支付宝扫一扫 
