Server-side Blazor用Plotly Blazor新窗口打开图表时plotlyInterop未定义问题

问题背景 #

通过JS Interop调用open打开包含Plotly图表的新窗口时，出现以下错误：

Error: Microsoft.JSInterop.JSException: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).

该问题仅在Visual Studio 2022 17.3.6搭配IISExpress的开发环境出现，刷新页面后功能恢复正常，部署到树莓派Nginx时无此问题。

解决建议 #

• 确认脚本加载顺序与路径
  确保新页面的HTML中，Plotly核心脚本与interop脚本按顺序加载，且路径正确：

  <!-- 先加载Plotly核心库 -->
  <script src="_content/Plotly.Blazor/plotly-latest.min.js"></script>
  <!-- 再加载Plotly Blazor的interop脚本 -->
  <script src="_content/Plotly.Blazor/plotlyInterop.js"></script>
  

  可通过浏览器开发者工具的网络标签，确认脚本是否成功加载（HTTP状态码为200），排查开发环境IISExpress的静态资源路由问题。

• 延迟图表初始化，等待脚本加载完成
  在新页面的Blazor组件中，重写OnAfterRenderAsync方法，先判断plotlyInterop是否存在，再执行图表初始化逻辑：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          // 轮询等待脚本加载完成
          while (!await JSRuntime.InvokeAsync<bool>("typeof window.plotlyInterop !== 'undefined'"))
          {
              await Task.Delay(100);
          }
          // 执行图表初始化
          await InitializePlotlyChart();
      }
  }
  
  private async Task InitializePlotlyChart()
  {
      // 你的Plotly图表初始化代码
  }
  

• 禁用IISExpress静态资源缓存
  修改项目的launchSettings.json，添加静态资源无缓存配置，避免开发环境缓存旧脚本：

  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:5000",
      "sslPort": 44300,
      "staticContent": {
        "clientCache": {
          "cacheControl": "no-cache, no-store, must-revalidate"
        }
      }
    }
  }
  

• 使用Blazor导航管理器生成URL
  替代直接拼接URL，用NavigationManager生成正确的路由URL，确保Blazor路由系统正确处理资源加载：

  // 注入NavigationManager
  [Inject]
  public NavigationManager NavManager { get; set; }
  
  // 生成URL并打开新窗口
  var targetUrl = NavManager.GetUriWithQueryParameters($"/chart/{b}/{(int)readingType}", null);
  await JSRuntime.InvokeVoidAsync("open", targetUrl, "_blank");
  

• 检查新页面的内容安全策略（CSP）
  确认新页面的CSP允许加载Plotly脚本，可在页面<head>中添加：

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' '_content/Plotly.Blazor' 'unsafe-inline';">
  

  开发环境可适当放宽CSP限制，生产环境再调整为更严格的规则。

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