如何在html上引用html_在HTML页面上引用外部HTML文件【引用】

可通过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文件路径。

标签： javascript java html js apache 浏览器 edge html文件