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属性提升可访问性，例如：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文档的机制，但已被所有主流浏览器弃用，不再推荐使用，也不具备向后兼容性。

Waifulabs

一键生成动漫二次元头像和插图

317

查看详情

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文件【外部】的详细内容，更多请关注php中文网其它相关文章！