JavaScript 中怎么给页面注入一段新的 script 节点-js教程-PHP中文网

javascript动态注入script节点最常用方式是创建元素、设属性（src或textcontent）、再插入head或body；外部脚本需监听load/error事件，内联脚本插入即执行。

javascript 中怎么给页面注入一段新的 script 节点

在 JavaScript 中动态注入新的 <script></script> 节点，最常用且可靠的方式是创建 script 元素、设置其属性（如 src 或内联代码），再插入到文档中（通常加到或末尾）。

注入外部 JS 文件

适用于加载 CDN 脚本或远程模块：

用 document.createElement('script') 创建元素
设置 src 属性指向目标 URL
可选：设置 async 或 defer 控制执行时机
调用 document.head.appendChild() 或 document.body.appendChild() 插入

示例：

const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js';
script.async = true; // 非阻塞加载，加载完立即执行
document.head.appendChild(script);

注入内联 JavaScript 代码

适合运行小段逻辑、初始化脚本或调试代码：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

创建 script 元素后，用 textContent 或 appendChild(document.createTextNode(...)) 写入代码
注意：不能用 innerHTML，script 标签内容不解析 HTML
插入后会立即执行（除非在 head 中且未设 defer）

示例：

const script = document.createElement('script');
script.textContent = 'console.log("Hello from injected script!"); alert("Loaded!");';
document.head.appendChild(script);

确保脚本执行完成后再操作

若依赖注入脚本的全局变量或函数，需监听加载完成事件：

对 src 脚本：监听 load（成功）和 error（失败）事件
避免在 appendChild 后立刻调用新脚本定义的函数，可能尚未执行完毕
内联脚本无需等待，插入即执行（同步）

示例（带错误处理）：

const script = document.createElement('script');
script.src = '/path/to/module.js';
script.onload = () => console.log('Script loaded');
script.onerror = () => console.error('Failed to load script');
document.head.appendChild(script);