SharePoint自定义导航栏：如何在顶部附近添加JavaScript代码

目标位置参考：

根据站点使用的体验版本不同，有两种稳定可落地的实现方式：

现代体验站点（官方推荐方案：SPFx应用定制器） #

这是微软官方原生支持的自定义方式，不会被平台后续更新覆盖配置，兼容性最好。

• 实现步骤：
  • 创建SPFx Application Customizer扩展，指定使用Top占位符，该占位符默认渲染位置就是顶部导航栏上方、靠近阅读线的区域，和目标位置完全匹配
  • 在扩展渲染逻辑中引入存放在站点资源库的自定义JS文件，不要直接写内联脚本，避免被SharePoint默认CSP策略拦截
  • 核心实现代码参考：

export default class TopNavInjector extends BaseApplicationCustomizer<{}> {
  public onInit(): Promise<void> {
    const topPlaceHolder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
    if (!topPlaceHolder) return Promise.resolve();
    
    // 注入自定义JS
    const customScript = document.createElement('script');
    customScript.src = `${this.context.pageContext.web.serverRelativeUrl}/SiteAssets/custom-nav.js`;
    topPlaceHolder.domElement.appendChild(customScript);
    
    return Promise.resolve();
  }
}

• 打包扩展上传到租户应用目录，部署到目标站点即可全站生效，无需修改母版页或单独编辑每个页面。

经典体验站点（两种快速实现路径） #

针对仍在使用经典UI的老版本SharePoint站点，可根据持有权限选择方案：

• 有SharePoint Designer权限：直接编辑站点使用的母版页，找到顶部导航节点<div id="suiteBarDelta">的前置位置，插入自定义脚本引用，保存签入后全站生效
• 无Designer编辑权限：通过PowerShell为站点添加UserCustomAction脚本链接，在自定义JS中通过DOM操作将内容挂载到目标位置，核心挂载逻辑参考：

_spBodyOnLoadFunctionNames.push("renderCustomNavArea");
function renderCustomNavArea() {
  const navParent = document.querySelector('#suiteBarTop')?.parentElement;
  if (!navParent || document.getElementById('custom-nav-block')) return;
  const customBlock = document.createElement('div');
  customBlock.id = 'custom-nav-block';
  // 在此处执行自定义导航逻辑、插入对应DOM结构
  navParent.insertBefore(customBlock, navParent.firstChild);
}

避坑提示：不要直接修改SharePoint系统核心JS文件、也不要通过隐藏原生导航替换自定义导航的方式实现，这类非官方支持的修改在平台安装累积更新后大概率失效。

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