单页应用中<script>标签仅在页面刷新时生效问题排查

我来帮你拆解下这个问题的核心原因，再给你一步步的解决办法：

问题根源 #

你遇到的问题主要来自两个点：

1. 重复加载脚本的无效性：你定义的scriptLoad函数里，tag是全局变量，第一次调用时会创建并添加script标签到DOM，但后续再调用这个函数，只是修改已存在的script的src并重新append——浏览器不会重复加载和执行同一个脚本文件，所以当你点击View1的链接时，路由重新渲染了View1的HTML，但d3的初始化代码不会再运行。
2. DOM更新后未重新触发图表渲染：首次加载时，d3脚本执行会找到当时的.chart-area元素生成图表，但路由切换后，#app里的内容被全新的View1 HTML替换，新的.chart-area没有被d3初始化，自然就看不到图表了。

解决步骤 #

1. 重构D3图表代码，封装成可调用函数

把static/js/d3chart.js里的图表逻辑改成可复用的函数，这样我们可以在需要的时候主动调用它：

// static/js/d3chart.js
export function renderD3Chart() {
  // 先清空目标容器的旧内容，避免重复渲染
  d3.select(".chart-area").selectAll("*").remove();

  // 这里写你的D3图表核心代码，举个简单例子：
  const svg = d3.select(".chart-area")
    .append("svg")
    .attr("width", 400)
    .attr("height", 300);

  svg.append("circle")
    .attr("cx", 200)
    .attr("cy", 150)
    .attr("r", 50)
    .style("fill", "steelblue");
  
  // 你的其他图表绘制逻辑...
}

// 首次加载页面时，如果存在chart-area，自动渲染一次
if (document.querySelector(".chart-area")) {
  renderD3Chart();
}

2. 修改路由逻辑，在View1渲染完成后触发图表渲染

在路由文件里，我们需要在View1的HTML渲染完成后，主动调用刚才封装的图表函数：
首先在路由文件顶部导入这个函数：

import { renderD3Chart } from "../static/js/d3chart.js";
// 你的其他import...

然后修改router函数，在更新完#app的HTML后添加判断：

const router = async () => {
  const routes = [
    { path: "/", view: view1 },
    { path: "/view2", view: view2 }
  ];

  const potentialMatches = routes.map(route => {
    return {
      route: route,
      result: location.pathname.match(pathToRegex(route.path))
    };
  });

  let match = potentialMatches.find(potentialMatch => potentialMatch.result !== null);

  if (!match) {
    match = {
      route: routes[0],
      result: [location.pathname]
    };
  }

  const view = new match.route.view(getParams(match));
  document.querySelector("#app").innerHTML = await view.getHtml();

  // 关键：如果当前渲染的是View1，调用图表渲染函数
  if (match.route.path === "/") {
    renderD3Chart();
  }
};

3. 移除冗余的动态脚本加载逻辑

你代码里有两处重复的scriptLoad定义和调用，这些现在都不需要了，直接删除以下所有代码：

// 第一处
var tag = document.createElement("script");
function scriptLoad() {
 tag.src = "static/js/d3chart.js";
 tag.id = "d3chart"
 document.getElementsByTagName('head')[0].appendChild(tag);
};

// 第二处
var tag = document.createElement("script");
function scriptLoad () {
 tag.src = "static/js/d3chart.js";
 tag.id = "d3chart"
 document.getElementsByTagName('body')[0].appendChild(tag);
}

还有点击事件里的scriptLoad();调用。

4. 确保项目支持ES模块

因为我们用了import/export，要确保你的主脚本在HTML里是用模块方式引入的：

<script type="module" src="你的主路由脚本路径.js"></script>

为什么这样能解决问题？ #

• 封装renderD3Chart后，每次View1被渲染（不管是首次加载还是路由切换回来），我们都能主动触发图表渲染，针对新的.chart-area元素生成图表。
• 改用模块化导入替代动态添加script，避免了重复加载脚本的问题，代码也更清晰可控。
• 在路由渲染完成后调用函数，确保此时DOM已经更新完成，D3能找到对应的容器元素。

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