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

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

在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'` 错误:

  1. 主应用 ,开启了qiankuan沙箱机制,乾坤会对子应用的DOM和样式进行隔离,可能回导致el-dropdown-menu的定位和样式定位的计算;
bash 复制代码
start({
  sandbox: {
    experimentalStyleIsolation: true,
    strictStyleIsolation: true
  },
  prefetch: 'all'
})
  1. getComputedStyle 报错,el-dropdown-menu 在计算样式时,可能无法正确获取 DOM 元素,导致 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 错误;

  2. 查看单独子应用的DOM元素

  3. 查看qiankun模式下的子应用的DOM元素

    没有自动的定位和样式定位的计算

解决方法

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

bash 复制代码
// 独立运行时
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: () => '',
      };
    }
  }
}

重启一下子应用,完美解决

相关推荐
OEC小胖胖2 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->3 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim3 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端4 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头5 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz5 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子5 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边5 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客5 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8885 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js