动态添加 js 标签

2025-04-05 | 0 浏览 | 0 评论

动态添加js标签

在 JavaScript 中，你可以动态地创建一个 <script> 标签并将其添加到文档中，以便在页面加载后动态加载外部 JavaScript 文件或执行内联 JavaScript 代码。以下是如何实现这一操作的示例：

1. 动态加载外部 JavaScript 文件

// 创建一个新的 script 元素
var script = document.createElement('script');

// 设置 script 的 src 属性，指向外部 JS 文件
script.src = 'https://example.com/path/to/your/script.js';

// 设置 script 的 type 属性（可选，默认为 'text/javascript'）
script.type = 'text/javascript';

// 可选：设置 async 或 defer 属性
script.async = true; // 异步加载
// script.defer = true; // 延迟加载

// 将 script 元素添加到文档的 head 或 body 中
document.head.appendChild(script); // 或者 document.body.appendChild(script);

// 可选：在脚本加载完成后执行回调
script.onload = function() {
    console.log('脚本加载完成');
};

// 可选：处理脚本加载失败的情况
script.onerror = function() {
    console.error('脚本加载失败');
};

2. 动态执行内联 JavaScript 代码

// 创建一个新的 script 元素
var script = document.createElement('script');

// 设置 script 的 type 属性（可选，默认为 'text/javascript'）
script.type = 'text/javascript';

// 设置内联 JavaScript 代码
script.textContent = 'console.log("这段代码是动态执行的");';

// 将 script 元素添加到文档的 head 或 body 中
document.head.appendChild(script); // 或者 document.body.appendChild(script);

3. 动态加载多个脚本

如果你需要动态加载多个脚本，可以使用递归或 Promise 来确保它们按顺序加载。

function loadScript(url) {
    return new Promise((resolve, reject) => {
        var script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';
        script.async = true;

        script.onload = resolve;
        script.onerror = reject;

        document.head.appendChild(script);
    });
}

// 按顺序加载多个脚本
loadScript('https://example.com/path/to/script1.js')
    .then(() => loadScript('https://example.com/path/to/script2.js'))
    .then(() => loadScript('https://example.com/path/to/script3.js'))
    .then(() => {
        console.log('所有脚本加载完成');
    })
    .catch((error) => {
        console.error('脚本加载失败:', error);
    });

注意事项

异步加载：使用 async 属性时，脚本会在下载完成后立即执行，不保证执行顺序。
延迟加载：使用 defer 属性时，脚本会在文档解析完成后按顺序执行。
跨域问题：加载外部脚本时，确保目标服务器允许跨域请求（CORS）。

通过以上方法，你可以在 JavaScript 中动态地添加和执行脚本，从而实现更灵活的脚本加载和管理。

笔记