在前端开发场景中，我们常常需要在当前HTML页面中引入其他HTML文件的内容，比如公共的导航栏、页脚、弹窗组件等，使用JavaScript可以灵活实现这个需求，下面介绍几种常用的实现方案。
方案一：使用iframe嵌入HTML内容
iframe是HTML原生的嵌入框架标签，可以直接将其他HTML文件嵌入到当前页面中，操作起来非常简单，适合不需要频繁交互的独立模块加载。
我们可以通过JavaScript动态创建iframe元素，设置其src属性为目标HTML文件的路径，再将其插入到当前页面的指定容器中。
<!-- 当前页面结构 -->
<div id="content-container"></div>
<script>
// 动态创建iframe
const iframe = document.createElement('iframe');
// 设置目标HTML文件路径
iframe.src = './header.html';
// 可选：设置样式
iframe.style.width = '100%';
iframe.style.height = '100px';
iframe.style.border = 'none';
// 插入到容器
document.getElementById('content-container').appendChild(iframe);
</script>
这种方式的优点是实现简单，目标HTML文件的样式和脚本会独立运行，不会污染当前页面的环境，缺点是跨域场景下可能无法操作iframe内部的内容，且iframe的性能和SEO表现相对较差。
方案二：使用AJAX请求加载HTML内容
AJAX可以通过异步请求获取目标HTML文件的内容，然后将内容直接插入到当前页面的指定元素中，适合需要和目标页面深度交互的场景。
我们可以使用原生的XMLHttpRequest对象发起请求，获取HTML内容后通过innerHTML属性插入到容器中。
// 获取容器元素
const container = document.getElementById('content-container');
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 配置请求方法和目标路径
xhr.open('GET', './sidebar.html', true);
// 监听请求状态变化
xhr.onreadystatechange = function() {
// 请求完成且状态为200表示成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 将获取到的HTML内容插入容器
container.innerHTML = xhr.responseText;
// 可以在这里执行目标HTML中脚本的初始化逻辑
}
};
// 发送请求
xhr.send();
使用这种方式需要注意，插入的HTML中的script标签不会自动执行，如果需要执行目标文件中的脚本，需要手动提取script内容并重新执行。
方案三：使用fetch API获取HTML内容
fetch是现代浏览器支持的更强大的网络请求API，语法更简洁，基于Promise设计，支持异步等待，是AJAX的现代替代方案。
我们可以通过fetch发起请求，获取响应后转为文本，再将文本插入到页面容器中。
// 使用async/await语法
async function loadHTML() {
try {
// 发起fetch请求
const response = await fetch('./footer.html');
// 判断请求是否成功
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 将响应转为文本
const htmlContent = await response.text();
// 插入到容器
document.getElementById('content-container').innerHTML = htmlContent;
} catch (error) {
console.error('加载HTML内容失败：', error);
}
}
// 调用函数
loadHTML();
fetch的兼容性在IE浏览器中较差，如果需要兼容旧浏览器，可以搭配polyfill使用，或者选择前面的AJAX方案。
方案四：使用Web Components封装复用
如果需要频繁复用某个HTML模块，可以使用Web Components技术将其封装为自定义元素，使用时直接像普通HTML标签一样调用即可。
我们可以先定义一个自定义元素，在它的连接回调中加载对应的HTML内容。
// 定义自定义元素类
class HtmlLoader extends HTMLElement {
// 元素连接到DOM时触发
async connectedCallback() {
// 获取元素上的src属性，即目标HTML路径
const src = this.getAttribute('src');
if (!src) return;
try {
const response = await fetch(src);
const html = await response.text();
this.innerHTML = html;
} catch (error) {
console.error('加载HTML失败：', error);
}
}
}
// 注册自定义元素，名称为html-loader
customElements.define('html-loader', HtmlLoader);
使用时只需要在HTML中添加自定义标签即可：
<html-loader src="./card.html"></html-loader>
这种方式适合组件化开发场景，复用性高，且自定义元素内部的样式和脚本可以做到隔离，不会影响外部页面。
不同方案的选择建议
我们可以根据实际需求选择合适的方案：
- 如果是加载独立的、不需要交互的模块，优先选择iframe方案，实现成本最低
- 如果需要和目标HTML内容深度交互，且不需要兼容IE，优先选择fetch方案，语法更简洁
- 如果需要兼容旧浏览器，选择AJAX方案更稳定
- 如果是高频复用的公共组件，选择Web Components方案，复用性和可维护性更好
需要注意所有方案都遵循浏览器的同源策略，如果加载的HTML文件和当前页面不同源，需要目标服务器配置CORS跨域头才能正常加载内容。
JavaScriptHTMLiframeAJAXfetch修改时间：2026-07-19 21:36:15