如何基于localStorage动态加载HTML head标签中的CSS/JS文件？

你的document.write方案无效的核心原因是：如果在DOM加载完成后调用这个方法，它会直接覆盖整个页面的内容，这显然不是你想要的效果。下面是两种可靠的动态加载方法，直接操作DOM元素插入到head标签中：

一、动态加载CSS文件 #

// 从localStorage获取辖区标识
const jurisdiction = localStorage.getItem('jurisdiction');

// 先判断值是否有效，避免加载无效URL
if (jurisdiction) {
  // 创建link标签元素
  const cssLink = document.createElement('link');
  cssLink.rel = 'stylesheet';
  cssLink.type = 'text/css';
  cssLink.href = `../_externals/stylesheets/assist/${jurisdiction}.css`;

  // 将link标签插入到head中
  document.head.appendChild(cssLink);

  // 可选：监听加载状态，便于调试
  cssLink.onload = () => {
    console.log(`${jurisdiction}.css 加载完成`);
  };
  cssLink.onerror = () => {
    console.error(`${jurisdiction}.css 加载失败，请检查路径或文件是否存在`);
  };
}

二、动态加载JS文件 #

逻辑和加载CSS一致，只是创建的是script元素：

const jurisdiction = localStorage.getItem('jurisdiction');

if (jurisdiction) {
  const script = document.createElement('script');
  script.src = `../_externals/scripts/assist/${jurisdiction}.js`;
  // 如果需要异步加载可以加这个属性，根据需求调整
  // script.async = true;

  document.head.appendChild(script);

  script.onload = () => {
    console.log(`${jurisdiction}.js 加载完成`);
  };
  script.onerror = () => {
    console.error(`${jurisdiction}.js 加载失败，请检查路径或文件是否存在`);
  };
}

关键注意事项 #

• 执行时机：确保这段代码在DOM加载完成后执行，比如放在DOMContentLoaded事件监听里，或者直接写在</body>标签的前面，避免document.head不存在导致报错：

  document.addEventListener('DOMContentLoaded', () => {
    // 这里放上面的加载代码
  });
  

• 空值处理：一定要判断jurisdiction是否为null或空字符串，否则会生成类似../_externals/stylesheets/assist/null.css的无效URL。
• 顺序控制：如果CSS和JS有依赖关系，可以在CSS的onload事件里再加载JS，保证加载顺序。

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