如何在JavaScript文件中加载指定脚本与样式表？

嘿，我来帮你搞定这个需求！在JS文件里动态加载外部脚本和样式表其实很简单，主要是通过创建DOM元素并插入到页面中的方式来实现，下面给你两种实用的方案：

方法一：手动创建DOM元素加载 #

这种方式最直接，不需要依赖任何库，纯原生JS就能实现。

加载Bootstrap样式表 #

我们可以动态创建一个<link>元素，设置好对应的属性后插入到页面的<head>标签里：

// 创建link元素
const bootstrapCSS = document.createElement('link');
// 设置样式表核心属性
bootstrapCSS.rel = 'stylesheet';
bootstrapCSS.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css';
// 将元素插入到head标签中完成加载
document.head.appendChild(bootstrapCSS);

加载Chart.js脚本 #

同样的思路，创建<script>元素插入到页面中。如果需要在脚本加载完成后执行依赖逻辑，可以监听onload事件：

// 创建script元素
const chartJS = document.createElement('script');
// 设置脚本地址
chartJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js';
// 监听加载完成事件，执行后续逻辑
chartJS.onload = function() {
  console.log('Chart.js 加载完成！');
  // 示例：初始化一个简单的柱状图（需页面上有id为myChart的canvas元素）
  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],
        borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],
        borderWidth: 1
      }]
    },
    options: {
      scales: { y: { beginAtZero: true } }
    }
  });
};
// 插入到body末尾，避免阻塞页面渲染
document.body.appendChild(chartJS);

方法二：封装成可复用的函数 #

如果需要加载多个资源，把逻辑封装成Promise函数会更方便，还能轻松处理加载顺序和错误情况：

// 加载样式表的复用函数
function loadCSS(href) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.onload = () => resolve(`样式表 ${href} 加载完成`);
    link.onerror = () => reject(new Error(`样式表 ${href} 加载失败`));
    document.head.appendChild(link);
  });
}

// 加载脚本的复用函数
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(`脚本 ${src} 加载完成`);
    script.onerror = () => reject(new Error(`脚本 ${src} 加载失败`));
    document.body.appendChild(script);
  });
}

// 按顺序加载资源（先CSS后脚本，保证依赖顺序）
loadCSS('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css')
  .then(console.log)
  .then(() => loadScript('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'))
  .then(console.log)
  .then(() => {
    // 这里执行所有资源加载完成后的逻辑
  })
  .catch(error => console.error('资源加载出错:', error));

注意事项 #

• 加载顺序：如果资源之间存在依赖关系（比如某些脚本依赖样式表的样式），一定要保证依赖资源先加载完成，上面的Promise链式调用就能完美处理这种顺序需求。
• 错误处理：记得添加onerror事件监听，避免资源加载失败时无感知。
• 插入位置：脚本插入到<body>末尾通常比<head>更好，不会阻塞页面的初始渲染。

内容的提问来源于stack exchange，提问作者Ashutosh Rai