博客 / 詳情

返回

無界微前端環境不能加載svg,導致圖標丟失問題解決

在無界微前端環境下,svg圖標偶爾會加載不到。或者説是第一次能加載,
後面再打開同樣得頁面就加載不到了。這種問題我們通過plugins來解決!

{
    plugins: [{
    // element 為真正插入的元素,iframeWindow 為子應用的 window, rawElement為原始插入元素 
    appendOrInsertElementHook(element, iframeWindow, rawElement) {
       if (
        element.nodeName === "svg" &&
        (element.getAttribute("aria-hidden") === "true" ||
          element.style.display === "none" ||
          element.style.visibility === "hidden" ||
          (element.style.height === "0px" && element.style.width === "0px"))
      ) {
        iframeWindow.__WUJIE.styleSheetElements.push(element);
      }
    }
  },]
}

上面就是説插入到主應用得svg字體或者圖標複製一份到子應用內。
這樣子應用就可以正常獲取到svg圖標字體了。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.