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

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

相关推荐
浩星6 分钟前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱8 分钟前
element plus 多个form校验
前端
yume_sibai17 分钟前
HTML HTML基础(3)
前端·html
米花丶24 分钟前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
唐•苏凯1 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军1 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js