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 部件必須在您要執行此腳本的站點上可用。