html如何调用其他html文件_调用外部HTML文件内容技巧【技巧】

可在HTML页面中嵌入另一HTML文件内容的方法有五种：一、用iframe标签直接加载；二、用fetch API动态获取并插入；三、用import()导入HTML模板；四、用服务端包含（SSI）预编译；五、用XMLHttpRequest手动加载。

如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而不是通过超链接跳转，则需要借助特定技术手段实现内容的动态加载或静态包含。以下是几种可行的方法：

一、使用iframe标签嵌入外部HTML文件

iframe 是 HTML 原生支持的内联框架标签，可在当前页面中开辟一个独立的渲染区域，直接显示目标HTML文件的完整页面内容。该方式无需JavaScript支持，兼容性高，但会以独立文档形式加载，样式与主页面隔离。

1、在需要插入外部HTML的位置添加 iframe 元素。

2、设置 src 属性为外部HTML文件的相对或绝对路径，例如 src="header.html"。

立即学习“前端免费学习笔记（深入）”；

3、可选地设置 width、height、border 等属性控制显示尺寸和外观，如 width="100%" height="200" frameborder="0"。

二、使用JavaScript的fetch API动态加载并插入HTML内容

该方法通过异步请求获取外部HTML文件的文本内容，再将其解析并注入到指定DOM容器中，可实现无缝融合，避免iframe的样式隔离问题，且支持错误处理与加载状态控制。

1、在目标位置添加一个具有唯一 id 的容器元素，例如

2、在页面底部或 script 标签中编写 JavaScript 代码，调用 fetch 获取外部HTML文件。

3、使用 response.text() 获取响应体字符串，并通过 element.innerHTML = htmlString 插入到容器中。

4、确保外部HTML文件与当前页面同源，否则将触发跨域限制，导致请求失败。

三、使用JavaScript的import()动态导入HTML模板（需配合构建工具）

现代前端开发中，可通过 ES 模块机制将HTML片段封装为模块，在运行时按需加载。该方式依赖构建工具（如Vite、Webpack）对 .html 文件进行特殊处理，将其转为可导入的字符串或DOM节点。

1、将外部HTML保存为独立文件，例如 template.html，并确保其内容为纯HTML片段（不含 、

歌者PPT

歌者PPT，AI 写 PPT 永久免费

358

查看详情

2、在构建配置中启用对 .html 文件的模块解析支持，例如 Vite 默认支持 import template from './template.html?raw'。

3、在脚本中执行 import() 调用，获取HTML字符串后插入到目标节点。

四、服务端包含（SSI）或模板引擎预编译

若网站部署在支持服务器端包含（SSI）的环境（如Apache启用 includes 模块），可在HTML文件中使用注释指令让服务器在响应前将外部文件内容插入当前位置，生成最终HTML返回给浏览器。

1、确保Web服务器已启用 SSI 功能，并将文件扩展名设为 .shtml 或配置对应 MIME 类型。

2、在HTML中插入如下格式的注释指令：。

3、注意该指令仅在服务器端生效，直接双击打开本地 .shtml 文件将无法解析该指令。

五、使用Ajax与XMLHttpRequest手动加载HTML片段

在不支持 fetch 的老旧环境中，可使用 XMLHttpRequest 对象发起同步或异步请求，读取外部HTML文件内容，并手动写入DOM。该方式兼容IE8+，但代码冗长，需自行处理状态码与异常。

1、创建 XMLHttpRequest 实例对象。

2、调用 open() 方法指定请求方式（GET）与外部HTML路径。

3、设置 onreadystatechange 回调函数，在 readyState === 4 且 status === 200 时读取 responseText。

4、将 responseText 赋值给目标元素的 innerHTML 属性完成插入。

以上就是html如何调用其他html文件_调用外部HTML文件内容技巧【技巧】的详细内容，更多请关注php中文网其它相关文章！