使用jQuery getScript加载SharePoint 2013资源：如何检测资源是否已加载

当然有办法搞定这个需求！每次点击按钮就加载脚本很容易导致重复请求，下面几种方案可以帮你精准检测这些脚本是否已经加载，避免不必要的重复操作：

方案一：检测脚本暴露的全局变量（最可靠） #

SharePoint的这几个人员选取器相关脚本加载完成后，会在全局作用域暴露对应的API对象，你可以通过检查这些对象是否存在来判断脚本是否加载：

• autofill.js 加载后会暴露 Autofill 对象
• clientforms.js 加载后会暴露 SP.ClientForms 对象
• clientpeoplepicker.js 加载后会暴露 SPClientPeoplePicker 对象

结合jQuery的getScript和状态标记，我们可以写出这样的代码：

// 维护已加载脚本的状态，避免重复请求
const loadedPeoplePickerScripts = {
  autofill: false,
  clientforms: false,
  clientpeoplepicker: false
};

// 封装加载脚本的函数
function loadPeoplePickerScripts() {
  const loadingPromises = [];

  // 检测并加载autofill.js
  if (!loadedPeoplePickerScripts.autofill && typeof Autofill === 'undefined') {
    loadingPromises.push(
      $.getScript('/_layouts/15/autofill.js').then(() => {
        loadedPeoplePickerScripts.autofill = true;
      })
    );
  }

  // 检测并加载clientforms.js
  if (!loadedPeoplePickerScripts.clientforms && typeof SP.ClientForms === 'undefined') {
    loadingPromises.push(
      $.getScript('/_layouts/15/clientforms.js').then(() => {
        loadedPeoplePickerScripts.clientforms = true;
      })
    );
  }

  // 检测并加载clientpeoplepicker.js
  if (!loadedPeoplePickerScripts.clientpeoplepicker && typeof SPClientPeoplePicker === 'undefined') {
    loadingPromises.push(
      $.getScript('/_layouts/15/clientpeoplepicker.js').then(() => {
        loadedPeoplePickerScripts.clientpeoplepicker = true;
      })
    );
  }

  // 等待所有需要加载的脚本完成
  return Promise.all(loadingPromises);
}

// 绑定"添加人员"按钮的点击事件
$('#yourAddPersonButton').on('click', function() {
  loadPeoplePickerScripts().then(() => {
    // 所有脚本加载完成后，这里执行人员选取器的初始化逻辑
    console.log('人员选取器脚本已准备就绪，可以初始化啦！');
    // 示例：初始化独立人员选取器
    // SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerContainer', {
    //   AllowEmailAddresses: true,
    //   AllowMultipleValues: false,
    //   MaximumEntitySuggestions: 5
    // });
  }).catch(error => {
    console.error('加载人员选取器脚本出错:', error);
  });
});

方案二：检查DOM中的script标签 #

你也可以通过查询页面中是否存在对应src的script标签来判断脚本是否已加载，不过这种方法要注意路径的一致性（比如绝对路径/相对路径的差异）：

// 检测指定src的脚本是否已加载
function isScriptLoaded(scriptSrc) {
  return $('script[src="' + scriptSrc + '"]').length > 0;
}

// 使用示例
if (!isScriptLoaded('/_layouts/15/autofill.js')) {
  $.getScript('/_layouts/15/autofill.js');
}

注意事项 #

• 脚本加载顺序：clientpeoplepicker.js 依赖 clientforms.js 和 autofill.js，如果发现初始化时出现报错，建议调整加载顺序为链式加载（先加载依赖脚本，再加载主脚本），比如：

  function loadPeoplePickerScripts() {
    let loadChain = Promise.resolve();
  
    if (!loadedPeoplePickerScripts.autofill && typeof Autofill === 'undefined') {
      loadChain = loadChain.then(() => $.getScript('/_layouts/15/autofill.js').then(() => {
        loadedPeoplePickerScripts.autofill = true;
      }));
    }
  
    if (!loadedPeoplePickerScripts.clientforms && typeof SP.ClientForms === 'undefined') {
      loadChain = loadChain.then(() => $.getScript('/_layouts/15/clientforms.js').then(() => {
        loadedPeoplePickerScripts.clientforms = true;
      }));
    }
  
    if (!loadedPeoplePickerScripts.clientpeoplepicker && typeof SPClientPeoplePicker === 'undefined') {
      loadChain = loadChain.then(() => $.getScript('/_layouts/15/clientpeoplepicker.js').then(() => {
        loadedPeoplePickerScripts.clientpeoplepicker = true;
      }));
    }
  
    return loadChain;
  }
  

• 缓存机制：jQuery的getScript默认不会缓存脚本，如果想启用缓存，可以在调用前设置 $.ajaxSetup({ cache: true });，避免每次点击都重新下载脚本。

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