js 动态加载js

作者：昨夜的风发布日期:2026-03-01 浏览:60

// 动态加载 JS 文件的方法

// 方法一：使用 script 标签动态创建并插入到 DOM 中
function loadScript(src) {
    // 创建一个 <script> 元素
    const script = document.createElement('script');
    // 设置 script 的 src 属性为要加载的 JS 文件路径
    script.src = src;
    // 将 script 插入到文档中，通常插入到 <head> 或 <body> 中
    document.head.appendChild(script);
}

// 调用函数，传入要加载的 JS 文件路径
loadScript('https://example.com/path/to/your/script.js');

// 方法二：使用 import() 动态导入模块 (ES6 模块)
async function loadModule(url) {
    try {
        // 使用 import() 动态加载模块
        const module = await import(url);
        console.log('模块加载成功:', module);
    } catch (error) {
        console.error('模块加载失败:', error);
    }
}

// 调用函数，传入要加载的模块路径
loadModule('./path/to/your/module.js');

解释说明：

方法一：通过 document.createElement('script') 创建一个新的 <script> 元素，并设置其 src 属性为要加载的 JS 文件路径。然后将该元素插入到页面的 <head> 或 <body> 中，浏览器会自动开始加载并执行该脚本。
方法二：使用 ES6 模块的 import() 方法动态加载模块。import() 返回一个 Promise，当模块加载完成时会解析为该模块的对象。这种方式适用于现代浏览器，并且可以按需加载模块。

上一篇：js 页面加载完成

下一篇：js 打开新的页面