如何根据年份动态切换script的src？修改后未生效问题求助

你遇到的问题核心是：已经被浏览器解析过的script元素，仅修改其src属性不会触发新脚本的加载与执行。浏览器在首次处理script标签时就完成了资源请求和执行逻辑，之后修改src只是改变了DOM属性，不会重新发起请求。

解决方案：替换script元素而非修改src #

正确的做法是移除旧的script元素，动态创建新的script标签并设置对应src，再插入到DOM中。这样浏览器会重新加载并执行新的脚本。

修改后的代码如下：

HTML（保持不变） #

<script id="element1" src="#"></script>
<script src="js/element-by-year.js"></script>

修改后的JS代码 #

var yearlyContainer = document.getElementById("element1").parentNode;
var yearlyScript = document.getElementById("element1");

var refreshStatus = () => {
  const today = new Date();
  const year = today.getFullYear();
  let targetSrc = "";

  // 确定对应年份的脚本路径
  if (year === 2022) {
    targetSrc = "js/change1.js";
  } else if (year === 2023) {
    targetSrc = "js/change2.js";
  }

  if (targetSrc && targetSrc !== yearlyScript.src) {
    // 移除旧的script元素
    yearlyScript.remove();
    // 创建新的script标签
    const newScript = document.createElement("script");
    newScript.id = "element1";
    newScript.src = targetSrc;
    // 插入到原来的位置
    yearlyContainer.appendChild(newScript);
    // 更新引用为新的script元素
    yearlyScript = newScript;
  }
}

// 页面加载时执行一次
refreshStatus();

// 每天检查一次
setInterval(refreshStatus, 86400000);

额外优化点 #

• 使用else if替代多个独立if，避免不必要的判断
• 增加判断：只有当目标src和当前src不同时才替换，避免重复加载
• 保存父节点引用，确保新脚本插入到正确位置

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