本文详解如何在同源 iframe 中安全、可靠地注入 jQuery 库及依赖脚本，重点纠正使用 标签加载 JS 的常见错误，并提供可立即运行的完整方案。
本文详解如何在同源 iframe 中安全、可靠地注入 jquery 库及依赖脚本，重点纠正使用 `` 标签加载 js 的常见错误，并提供可立即运行的完整方案。
向 iframe 注入 JavaScript 资源（如 jQuery 和自定义脚本）是前端开发中常见的需求，尤其在嵌入式管理后台或调试环境中。但必须注意： 标签仅适用于 CSS 文件，JavaScript 必须通过 <script> 标签加载</script>——这是原代码失效的根本原因。 与 <script src="..."> 的语义和浏览器解析机制完全不同，混用将导致脚本完全不执行。</script>
以下是修正后的完整注入逻辑（需确保 iframe 已加载完成，即监听 load 事件）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
iframeModal.addEventListener('load', function() {
const iframe = iframeModal.contentWindow.document; // 注意：此处应取 contentWindow.document，而非 body.firstChild.contentWindow.document
// ✅ 正确注入 CSS（保持原方式）
const cssLink = document.createElement('link');
cssLink.href = protocol + ip + 'test.css';
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
iframe.head.appendChild(cssLink); // 推荐插入到 head，而非 body
// ✅ 正确注入 jQuery（关键修正：用 script + src）
const jqScript = document.createElement('script');
jqScript.src = protocol + ip + 'jquery-min.js';
jqScript.type = 'text/javascript';
jqScript.onload = function() {
console.log('jQuery loaded successfully in iframe');
};
iframe.head.appendChild(jqScript);
// ✅ 正确注入自定义脚本（同样用 script + src）
const testScript = document.createElement('script');
testScript.src = protocol + ip + 'test.js';
testScript.type = 'text/javascript';
testScript.onload = function() {
console.log('test.js loaded and executed');
};
iframe.head.appendChild(testScript);
});
⚠️ 重要注意事项：
- 不要使用 href 加载 JS：<script> 标签必须使用 src 属性，href 无效且被忽略；</script>
- 确保 DOM 就绪时机：test.js 中的 $(document).ready(...) 仅在 jQuery 已就绪且 iframe 文档已解析完成时才生效；因此建议为 test.js 添加 onload 回调，或改用内联脚本（见下文进阶方案）；
- 推荐插入位置为 ：避免因 DOM 尚未构建完成导致脚本执行异常；
- 路径必须可访问：确认 protocol + ip + 'jquery-min.js' 在浏览器中可直接访问（例如 http://localhost:8080/jquery-min.js），否则控制台将报 404 错误；
- 若需保证执行顺序：jQuery 必须先于 test.js 加载完成，上述 onload 链式调用可确保这一点；也可将 test.js 内容改为内联执行（如下），规避加载竞态：
// 替代方案：动态创建并执行内联脚本（适合简单逻辑）
const inlineScript = document.createElement('script');
inlineScript.textContent = `
$(function() {
alert('Alert Test');
console.log('jQuery is ready inside iframe!');
});
`;
iframe.head.appendChild(inlineScript);
✅ 总结：注入 JS 的唯一标准方式是 <script src="...">；CSS 才用 <link href="..." rel="stylesheet">。只要遵循这一原则，配合正确的 DOM 插入时机与位置，即可稳定实现 iframe 内 jQuery 环境的初始化与脚本执行。</script>
