html 如何引入html_在HTML页面中引入外部HTML文件【外部】

可在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属性提升可访问性，例如：。

二、使用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文档的机制，但已被所有主流浏览器弃用，不再推荐使用，也不具备向后兼容性。

标签： css javascript java html js git html5 vite apache github 浏览器