SPO Modern：如何使用 js 以编程方式注入和执行 webpart？

Question

我只有 webpart 的 URL（例如 'https://sitename.com/sites/site-colection/ClientSideAssets/hereisguid/webpartname.js'），我需要通过 js 以编程方式注入和运行它，这可能吗？

Answer 1

它不受官方支持，但您可以使用全局变量（在每个现代页面上都可用）_spComponentLoader。 问题是 - 它要求您提供 WebPartContext，您不能简单地获得 SPFx 之外的内容。

如果您想在 SPFx 中执行此操作，这里有一个示例代码：

webPartId = hereisguid 来自您的网址

        let component = await _spComponentLoader.loadComponentById(webPartId);
        let manifest = _spComponentLoader.tryGetManifestById(webPartId);
        let wpInstance = new component.default();
        context.manifest = manifest;
        //@ts-ignore
        context._domElement = document.getElementById("<id-of-element-you-want-wp-to-render-in>")
        await wpInstance._internalInitialize(context, {}, 1);
        wpInstance._properties = webPart.properties;

        await wpInstance.onInit();
        wpInstance.render();
        wpInstance._renderedOnce = true;

再次 - 我认为它不受支持，因此请自行承担风险尝试。 请注意，此 Web 部件必须在您要执行此脚本的站点上可用。