SPO Modern：如何使用JS以编程方式注入并执行WebPart

这个需求可以实现，但不能只靠单纯引入目标JS文件完成，必须依托SharePoint Framework（SPFx）的运行时逻辑做加载处理，同时要满足几个必要前提。

必要前置条件 #

• 注入操作的目标页面必须是同站点下的SharePoint页面，且页面已经完成SPFx基础运行时初始化：也就是全局已经存在sp-loader、核心SPFx模块加载完成，普通空白非SharePoint页面直接引入这个WebPart JS是无法运行的。
• 当前访问页面对ClientSideAssets路径下的WebPart资源有读取权限，不存在跨域拦截、权限不足导致的资源加载失败问题。
• 你持有的JS路径确实是对应WebPart打包后的正式主bundle，不是拆分的懒加载分片文件。

具体实现步骤 #

1. 动态加载WebPart主bundle
   通过动态创建script标签的方式引入目标JS，要等脚本加载完成再执行后续逻辑，避免找不到注册的组件，参考代码：

   const loadWebPartScript = (webPartJsUrl) => {
     return new Promise((res, rej) => {
       // 避免重复加载同一个bundle
       if (document.querySelector(`script[src="${webPartJsUrl}"]`)) return res();
       const scriptEle = document.createElement('script');
       scriptEle.src = webPartJsUrl;
       scriptEle.onload = res;
       scriptEle.onerror = rej;
       document.body.appendChild(scriptEle);
     })
   }
   

2. 获取WebPart的注册清单
   WebPart脚本加载完成后，会自动把自身的组件清单、配置信息注册到SPFx全局组件注册表，你可以从全局__spfxManifests缓存，或者通过SPComponentLoader.getManifests()方法遍历找到对应WebPart的manifest，匹配时要核对WebPart的组件ID、版本号，避免拿到同站点下其他组件的信息。
3. 实例化渲染WebPart
   拿到正确的manifest后，调用SPFx运行时的组件渲染方法，指定你要挂载WebPart的DOM容器，传入对应配置（比如WebPart自定义属性、显示模式是浏览态/编辑态、上下文信息），就能把WebPart正常渲染到页面指定位置。

常见问题说明 #

• 不要以为插个script标签就完事：SPFx WebPart不是普通自执行JS，没有提前加载的SPFx基础运行时的话，就算脚本加载成功也不会自动执行渲染。
• 如果遇到组件加载报错，优先排查两个点：一是站点SPFx运行时版本和WebPart打包时用的SPFx版本是否差距过大导致依赖不兼容；二是当前用户有没有WebPart内部调用的SharePoint接口的访问权限，避免WebPart渲染出来但数据加载失败。
• 如果是现代页面本身支持SPFx组件的场景，这种注入方式和页面原生加载WebPart的运行逻辑基本一致，不会有额外的兼容性问题。

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