本文详解如何通过原生 JavaScript 动态加载 HTML 片段（如组件文件）并确保其中的 <script> 标签（含内联逻辑与外部引用）被安全、去重地执行，解决 innerHTML 赋值后脚本不运行的常见问题。
本文详解如何通过原生 javascript 动态加载 html 片段（如组件文件）并确保其中的 `<script>` 标签（含内联逻辑与外部引用）被安全、去重地执行，解决 `innerhtml` 赋值后脚本不运行的常见问题。</script>
在构建轻量级单页应用（SPA）或模块化静态站点时，开发者常使用 XMLHttpRequest 或 fetch 动态加载 HTML 组件（如 videoplayer.html），再通过 element.innerHTML = responseText 注入到 DOM 中。然而，浏览器出于安全与解析规范限制，直接设置 innerHTML 时，其中的 <script> 标签会被忽略——既不会执行内联代码，也不会加载 src 指向的外部脚本。这正是提问者遇到的核心问题：Video.js 初始化代码未触发，视频播放器无法渲染。
要真正“激活”动态加载的脚本，关键在于手动提取、重建并注入 <script> 元素，而非依赖 innerHTML 的被动解析。以下是经过生产验证的解决方案，已兼容内联脚本与外部脚本（如 src="https://vjs.zencdn.net/8.3.0/video.min.js"），并具备防重复加载机制：
✅ 正确实现：提取、去重、注入脚本
将原始 routeTo 函数升级为以下版本（使用现代语法优化可读性，同时保留兼容性）：
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 (HTTP ${xhr.status})`);
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;
// 可选：添加 async/defer 属性（根据业务需求）
newScript.async = false;
}
// 处理内联脚本（无 src，有文本内容）
else if (script.textContent || script.innerHTML) {
newScript.textContent = script.textContent || script.innerHTML;
}
else {
return; // 忽略空脚本
}
// 3. 防重复：检查是否已存在相同脚本（基于 outerHTML 粗略比对）
const isDuplicate = Array.from(document.head.querySelectorAll('script')).some(
existing => existing.outerHTML === newScript.outerHTML
);
if (!isDuplicate) {
document.head.appendChild(newScript);
}
// 4. 清理：从 pageContent 中移除原始 script 标签，避免冗余 DOM
script.remove();
});
};
xhr.send();
}⚠️ 重要注意事项
- 执行时机保障：此方案确保脚本在 HTML 插入后立即注入 head，因此能正确访问已渲染的 DOM 元素（如 #my-video）。但需注意：若脚本依赖其他库（如 Video.js），请确保其全局资源已在主页面 <head> 中提前加载（如提问中已引入 video.min.js）。
- async 与 defer 控制：默认设 newScript.async = false 以保证执行顺序与 HTML 中声明顺序一致。若需异步加载（如分析脚本），可设为 true，但需自行管理依赖关系。
- 安全性提醒：动态执行远程 HTML 中的脚本存在 XSS 风险。仅对可信来源（如同域 components/ 目录）使用此方案。生产环境建议配合 CSP（Content Security Policy）策略限制 script-src。
- 现代替代方案：对于新项目，推荐使用 fetch() + DOMParser 替代 XMLHttpRequest，并结合 import() 动态导入 ES 模块，实现更健壮的模块化。但本文方案在 IE11+ 及所有现代浏览器中均稳定可用。
✅ 效果验证（以 Video.js 为例）
当 videoplayer.html 被加载后：
立即学习“Java免费学习笔记（深入）”；
- <video> 元素正确渲染在 #pageContent 内；
- <script> 中的 videojs('my-video', {...}) 被提取、注入 head 并执行；
- Video.js 播放器实例成功初始化，响应式布局与配置生效。
通过这一机制，你即可在保持 HTML 结构清晰分离的同时，赋予动态加载内容完整的交互能力——无需框架，纯原生，精准可控。
