页面Ajax Navigation跳转时，如何触发自定义JavaScript函数？

这问题我之前在处理SharePoint的Ajax侧边栏导航时也碰到过，onunload只在页面刷新/关闭时触发，Ajax跳转因为不刷新页面自然不会触发。你试过直接给锚点或div加onclick无效，大概率是因为SharePoint的菜单事件是通过事件委托绑定的，而且你的代码可能在菜单生成前就执行了，导致绑定没生效。给你几个可行的解决思路：

1. 监听URL哈希变化（最通用的Ajax导航方案） #

大多数Ajax导航会通过修改URL哈希（#后面的部分）来实现浏览器前进/后退功能，你可以直接监听hashchange事件：

window.addEventListener('hashchange', function() {
  // 这里放入你原来的onUnload逻辑
  console.log("GOODBYE");
  // TODO: 插入你的业务函数
});

这个方案不需要依赖SharePoint的特定API，兼容性也很好。

2. 利用SharePoint内置的导航事件 #

SharePoint的Ajax导航在触发时会抛出自定义事件，你可以直接监听这些事件来执行函数。比如针对页面跳转的SP.UI.ApplicationPages.ClientRedirectEvent：

// 确保在SharePoint脚本加载完成后执行
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  Sys.Application.add_load(function() {
    SP.UI.ApplicationPages.ClientRedirectEvent.addHandler(function() {
      console.log("GOODBYE - SharePoint Ajax导航触发");
      // TODO: 插入你的业务函数
    });
  });
});

这个方案更贴合SharePoint的生态，能精准捕获官方Ajax导航的触发时机。

3. 用MutationObserver监听内容变更 #

Ajax导航本质是替换页面内容区域的DOM，你可以用MutationObserver观察内容容器的变化，当内容被替换时执行函数：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你页面中实际的内容容器ID（比如SharePoint默认的#contentRow）
  const targetContainer = document.getElementById('contentRow');
  if (!targetContainer) return;

  const observer = new MutationObserver(function(mutations) {
    // 检测到内容变化，说明Ajax导航完成
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        console.log("GOODBYE - 页面内容更新");
        // TODO: 插入你的业务函数
      }
    });
  });

  // 配置观察选项：监听子节点变化和子树变化
  observer.observe(targetContainer, { childList: true, subtree: true });
});

如果不确定内容容器的ID，可以通过浏览器开发者工具查看页面结构找到对应的元素。

4. 全局拦截侧边栏点击事件（兜底方案） #

如果上面的方案都不生效，你可以在文档的捕获阶段绑定点击事件，拦截侧边栏的链接点击：

document.addEventListener('click', function(e) {
  // 替换成你侧边栏链接的选择器（比如侧边栏容器的class是.ms-core-navigation）
  const sidebarLink = e.target.closest('.ms-core-navigation a');
  if (sidebarLink) {
    // 在Ajax跳转前执行你的函数
    console.log("GOODBYE - 侧边栏链接被点击");
    // TODO: 插入你的业务函数
  }
}, true); // 第三个参数设为true，使用捕获阶段确保优先触发

这个方案的核心是利用事件捕获机制，在SharePoint的事件处理逻辑之前执行你的代码，避免被事件委托阻止。

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