使用fetch可动态加载HTML并插入指定容器，但需手动处理脚本执行；通过创建新script元素可确保内联或外链脚本运行；若需隔离环境则推荐iframe嵌入完整页面；在模块化场景中可用异步函数封装HTML片段加载，提升复用性。
在网页开发中，有时需要将某个外部HTML文件的内容动态加载到当前页面，并正确解析其中的结构、样式甚至脚本。JavaScript 提供了多种方式来实现这一需求。下面介绍几种常见且实用的方法。
使用 fetch 加载外部 HTML 文件
现代浏览器支持 fetch API，可以通过它异步获取外部HTML文件内容。这是目前推荐的方式。
示例代码：
fetch('example.html')
.then(response => {
if (!response.ok) throw new Error('文件加载失败');
return response.text();
})
.then(html => {
// 将加载的HTML插入到指定容器
document.getElementById('container').innerHTML = html;
})
.catch(err => console.error('加载出错:', err));
这种方法简单直接，适合加载静态HTML片段。注意：通过 innerHTML 插入的 标签默认不会执行，需额外处理。
动态解析并执行脚本
如果外部HTML中包含需要运行的脚本（如初始化逻辑），不能仅靠 innerHTML。必须手动创建 script 元素来触发执行。
立即学习“前端免费学习笔记（深入）”；
解决方案：
function loadHTMLWithScripts(url, container) {
fetch(url)
.then(res => res.text())
.then(data => {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = data;
// 分离脚本
const scripts = tempDiv.querySelectorAll('script');
const containerEl = document.getElementById(container);
// 插入HTML内容（不含脚本）
containerEl.innerHTML = tempDiv.innerHTML;
// 重新创建并插入脚本以执行
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
containerEl.appendChild(newScript);
});
});
}
这样可以确保内联或外链脚本正常运行。适用于需要交互功能的模块化页面片段。
使用 iframe 嵌入完整页面
若希望完全隔离地加载一个完整的HTML页面，iframe 是更合适的选择。
用法示例：
const iframe = document.createElement('iframe');
iframe.src = 'example.html';
iframe.style.width = '100%';
iframe.style.height = '500px';
document.getElementById('container').appendChild(iframe);
iframe 拥有独立的上下文，不会影响主页面结构和样式，适合嵌入第三方内容或沙箱环境。
利用动态 import 处理组件式结构
在现代前端框架（如 Vue、React）中，通常采用组件化方案。但在纯JS项目中，也可结合构建工具实现模块化HTML加载。
虽然原生JS不支持直接 import HTML，但可通过封装函数模拟模块加载行为：
简易模块加载器：
async function includeHTML(selector, url) {
const response = await fetch(url);
const html = await response.text();
document.querySelector(selector).innerHTML = html;
}
// 调用
includeHTML('#header', '/partials/header.html');
这种方式便于维护页面公共部分（如页头、侧边栏），提升复用性。
基本上就这些。根据实际场景选择合适的方法：fetch 配合 DOM 操作适合局部更新；iframe 适合独立嵌入；而复杂应用建议结合模块化工具处理。关键是理解每种方式对脚本、样式和作用域的影响。
