可通过iframe、JavaScript动态加载、object标签、服务端包含（SSI）四种方式嵌入外部HTML；HTML Imports已废弃不可用。
如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而不是重复编写相同代码，则需要通过特定方式加载外部HTML片段。以下是实现此目标的多种方法：
一、使用iframe标签嵌入外部HTML
iframe允许将外部HTML文档作为独立的窗口嵌入到当前页面中，内容在隔离的上下文中运行，不影响主页面结构和脚本。
1、在需要插入外部HTML的位置添加iframe元素。
2、设置iframe的src属性为外部HTML文件的相对或绝对路径，例如：src=”header.html”。
立即学习“前端免费学习笔记（深入）”；
3、可选地设置width、height、border等属性以控制显示样式，注意：外部HTML文件需与当前页面同源，否则可能因CORS策略被浏览器阻止加载。
二、使用JavaScript动态加载HTML内容
通过fetch API获取外部HTML文件的文本内容，并将其插入到指定DOM容器中，适用于需要与主页面共享样式和脚本的场景。
1、在HTML中创建一个用于承载外部内容的容器，例如：
。
2、在script标签内或外部JS文件中编写fetch请求，目标URL为外部HTML文件路径。
3、使用response.text()解析响应体，再通过element.innerHTML = htmlText写入容器，注意：动态插入的脚本默认不执行，如需运行需手动创建并插入script标签。
三、使用object标签嵌入HTML片段
object标签可作为通用外部资源嵌入容器，支持HTML类型资源，兼容性较好但语义不如iframe明确。
1、在页面中插入object元素，设置data属性指向外部HTML文件路径。
2、设置type属性为”text/html”以声明资源类型。
3、可添加备用内容（fallback）作为子元素，当object无法加载时显示，注意：部分浏览器对object加载HTML的支持有限，建议在目标环境中测试渲染效果。
四、服务端包含（SSI）方式引用
在Web服务器启用SSI功能后，可在HTML文件中使用特殊注释语法指示服务器在响应前将外部文件内容插入当前位置。
1、确保Web服务器（如Apache）已启用Includes模块并配置了.shtml扩展名解析。
2、将当前文件扩展名改为.shtml，例如index.shtml。
3、在HTML中插入注释格式指令：，注意：该方法完全由服务器处理，客户端无法直接打开.shtml文件查看效果，必须通过HTTP服务访问。
五、使用HTML Imports（已废弃，仅作兼容说明）
HTML Imports曾是W3C提出的原生导入机制，允许通过link标签引入HTML文档，但已被现代浏览器弃用，不再推荐使用。
1、曾经可使用引入外部HTML。
2、导入后需通过import.body.innerHTML等方式提取内容并插入DOM。
3、注意：Chrome自73版本起已移除HTML Imports支持，Firefox和Edge从未实现，当前项目中严禁采用此方式。
以上就是如何在html上引用html_在HTML页面上引用外部HTML文件【引用】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604345.html
微信扫一扫 
支付宝扫一扫 
