【在qiankun模式下el-dropdown点击，浏览器报Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not o-CSDN博客

本文链接：https://blog.csdn.net/qq_39750019/article/details/147980862

在qiankun模式下el-dropdown点击，浏览器报Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’` 错误

在qiankun 前端框架中，主应用开启了样式隔离，
跳转子应用后，el-dropdown-menu点击，浏览器报浏览器报Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’` 错误。
在这里插入图片描述

问题描述

在qiankun 前端框架中，主应用开启了样式隔离，
跳转子应用后，el-dropdown-menu点击，浏览器报浏览器报Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’` 错误：

主应用 ，开启了qiankuan沙箱机制，乾坤会对子应用的DOM和样式进行隔离，可能回导致el-dropdown-menu的定位和样式定位的计算；

start({
  sandbox: {
    experimentalStyleIsolation: true,
    strictStyleIsolation: true
  },
  prefetch: 'all'
})

getComputedStyle 报错，el-dropdown-menu 在计算样式时，可能无法正确获取 DOM 元素，导致 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 错误；
查看单独子应用的DOM元素 ；
查看qiankun模式下的子应用的DOM元素 ；
没有自动的定位和样式定位的计算

解决方法

在子应用的main.js里面增加方法

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}else{
  const style = document.createElement('style');
  style.textContent = `
    svg { display: inline-block; overflow: visible!important; }
    use { width: 100%!important; height: 100%!important; }
  `;
  document.head.appendChild(style);
  const rawGetComputedStyle = window.getComputedStyle;
  window.getComputedStyle = function (element) {
    try {
      return rawGetComputedStyle.call(window, element);
    } catch (e) {
      console.warn('getComputedStyle error:', e);
      return {
        getPropertyValue: () => '',
      };
    }
  }
}