SharePoint Online导航跳转时自定义脚本未执行，是否为缓存问题？

这不是站点缓存问题，核心原因是SharePoint Modern采用SPA式导航（渐进式加载）：首次打开页面是完整加载流程，Application Customizer的初始化逻辑会正常执行；但通过巨型菜单等站点导航跳转时，页面不会完全刷新，仅局部更新DOM，而Customizer的代码默认只在首次页面加载时运行一次，后续导航不会重新触发，同时自定义JS的DOM绑定逻辑也未针对新页面的DOM重新执行，导致看起来代码"未运行"。

解决方案步骤 #

1. 监听SPA导航完成事件 #

使用SPFx官方提供的导航事件，精准捕获SharePoint Modern的SPA跳转完成动作，确保每次导航后都能重新执行脚本初始化逻辑。

2. 重构脚本加载逻辑 #

通过全局对象判断脚本是否已加载，避免重复请求；同时将自定义业务逻辑封装成可复用函数，在首次加载和导航完成后统一调用。

3. 完整代码示例 #

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { NavigationService } from '@microsoft/sp-webpart-base';

const LOG_SOURCE: string = 'JqueryLoaderApplicationCustomizer';

export interface IJqueryLoaderApplicationCustomizerProperties {}

export default class JqueryLoaderApplicationCustomizer
  extends BaseApplicationCustomizer<IJqueryLoaderApplicationCustomizerProperties> {

  // 封装页面脚本初始化逻辑
  private _initPageScripts(): void {
    const dateString = new Date().toISOString();
    
    // 加载样式文件
    SPComponentLoader.loadCss(`https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.css?d=${dateString}`);

    // 检查全局是否已加载jQuery，避免重复请求
    if (window.jQuery) {
      this._runCustomLogic(window.jQuery);
      return;
    }

    // 加载jQuery并执行后续逻辑
    SPComponentLoader.loadScript(
      `https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=${dateString}`,
      { globalExportsName: 'jQuery' }
    ).then(($: any) => {
      this._runCustomLogic($);
    });
  }

  // 封装自定义业务逻辑
  private _runCustomLogic($: any): void {
    $(document).ready(() => {
      console.log('jQuery ready for current page');
      
      // 标记自定义脚本是否已加载，避免重复加载
      if (!window['caj23ScriptLoaded']) {
        SPComponentLoader.loadScript(
          `https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=${new Date().toISOString()}`,
          {}
        ).then(() => {
          window['caj23ScriptLoaded'] = true;
          // 如果自定义脚本里有初始化函数，这里调用
          // 例如：window.initCaj23Features();
        });
      } else {
        // 脚本已加载，重新执行初始化逻辑（针对新DOM）
        // window.initCaj23Features();
      }
    });
  }

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${LOG_SOURCE}`);

    // 首次页面加载时执行初始化
    this._initPageScripts();

    // 监听SPA导航完成事件，每次跳转后重新执行逻辑
    NavigationService.instance.navigated.subscribe(() => {
      this._initPageScripts();
    });

    return Promise.resolve();
  }
}

关键说明 #

• 导航事件监听：NavigationService.instance.navigated是SPFx官方推荐的方式，比原生hashchange或popstate更适配SharePoint的导航机制，能精准捕获SPA跳转完成动作。
• 避免重复加载：通过window.jQuery和自定义标记window.caj23ScriptLoaded判断脚本状态，减少不必要的网络请求，提升页面性能。
• DOM就绪检查：在$(document).ready()中执行逻辑，确保每次导航后新的DOM元素已渲染完成，避免jQuery操作不存在的元素。
• 自定义逻辑复用：如果你的caj23.js包含DOM绑定、页面初始化等逻辑，需要将这些逻辑封装成独立函数（比如initCaj23Features），在首次加载和导航后都调用，确保新页面的DOM能被正确处理。

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