本文详解如何通过原生 JavaScript 动态插入 HTML 文件内容，并确保其中的 <script> 标签（含内联脚本与外部引用）被正确解析与执行，避免常见“脚本不运行”问题。
本文详解如何通过原生 javascript 动态插入 html 文件内容，并确保其中的 `<script>` 标签（含内联脚本与外部引用）被正确解析与执行，避免常见“脚本不运行”问题。</script>
在单页应用（SPA）轻量级实现中，常使用 XMLHttpRequest 或 fetch 动态加载 HTML 片段并注入到容器元素（如 <div id="pageContent">）中。然而，直接设置 innerHTML 会忽略所有嵌入的 <script> 标签——浏览器出于安全与规范原因，不会自动执行通过 innerHTML 插入的脚本代码，无论其是内联还是带 src 属性的外部脚本。
为什么 innerHTML 不执行脚本？
根据 HTML 规范，通过 element.innerHTML = htmlString 插入的脚本节点不会被主动执行，且 document.write 在已解析文档中亦被禁用。因此，像以下 videoplayer.html 中的初始化逻辑将完全失效：
<!-- components/videoplayer.html -->
<div class="container mt-5" id="vidPlayer" hidden>
<video id="my-video" class="video-js vjs-fluid" controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
<script>
// ❌ 此脚本不会执行！
videojs('my-video', { responsive: true });
</script>解决方案：手动提取、克隆并注入脚本
核心思路是：在 innerHTML 渲染后，主动遍历新插入 DOM 中的所有 <script> 节点，创建等效的新 <script> 元素，并追加至 <head>（或 <body> 底部），从而触发浏览器执行。同时需避免重复加载（如路由反复切换时）。
以下是优化后的 routeTo 函数（兼容现代浏览器，支持内联脚本与外部脚本）：
立即学习“Java免费学习笔记（深入）”；
function routeTo(path) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `components/${path}.html`, true);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status !== 200) {
console.error(`Failed to load component: ${path}.html`);
return;
}
// 1. 插入 HTML 结构
const container = document.getElementById('pageContent');
container.innerHTML = xhr.responseText;
// 2. 提取并执行所有 script 标签
const scripts = container.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
// 复制 src 属性（外部脚本）
if (script.src && script.src.trim()) {
newScript.src = script.src;
}
// 复制 innerHTML（内联脚本）
else {
newScript.textContent = script.textContent || script.innerHTML;
}
// 3. 防止重复加载：检查是否已存在相同脚本
const isDuplicate = Array.from(document.head.querySelectorAll('script')).some(
s =>
(s.src === newScript.src && s.src) ||
(s.textContent === newScript.textContent && !s.src)
);
if (!isDuplicate) {
document.head.appendChild(newScript);
}
// 4. 清理原 script 节点（避免冗余 DOM）
script.remove();
});
};
xhr.send();
}✅ 关键特性说明
- 支持两种脚本类型：<script src="..."> 与 <script>...</script> 均被识别并正确加载；
- 去重机制：通过比对 src 或 textContent，避免同一脚本在多次路由中重复执行（防止 Video.js 实例重复初始化等错误）；
- 安全清理：原始 <script> 节点从 pageContent 中移除，保持 DOM 干净；
- 零依赖：纯原生 JavaScript，无需 jQuery 或框架。
⚠️ 注意事项与最佳实践
- 执行时机：脚本注入到 <head> 后会立即执行，因此需确保依赖（如 video.min.js）已在主页面 <head> 中提前加载完毕；
- 作用域问题：内联脚本在全局作用域执行，变量/函数会污染 window；建议封装为 IIFE 或模块化；
- 异步外部脚本：若外部脚本本身是 async 或 defer，其加载行为由浏览器控制，本方案不改变其原生语义；
-
替代方案建议：
- 生产环境推荐使用 import() 动态导入 + 组件化（如 Lit、Vue SFC）；
- 简单场景可改用 fetch().then(r => r.text()).then(html => {...}) 替代 XMLHttpRequest，更现代易读；
- 调试技巧：在 newScript.onload 和 newScript.onerror 中添加日志，便于定位加载失败的脚本。
通过以上方法，你即可在保持轻量架构的同时，可靠地实现 HTML 片段 + 可执行 JS 的动态组合，让 Video.js、Chart.js 或任何依赖 DOM 就绪的库在按需加载后正常工作。
