当前位置：首页 > news >正文

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

news 来源：原创 2025/5/16 9:24:50

在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: () => '',};}}
}