记录使用无界微前端的两个问题window 和e.target

397 阅读1分钟

1. 子应用中如何使用真实的window对象

看官方介绍

子应用 window 是一个代理对象,如何获取子应用的真实对象​

原因: 为何采用代理,原因详见issue

解决方案:

  • 采用 window.__WUJIE_RAW_WINDOW__ 获取真实的 window 对象,

这个确实可以拿到原始的window对象,但是有一个问题,如果主应用window上挂载了自有方法,例如 window.jQuery, 在window.__WUJIE_RAW_WINDOW__中是获取不到的。

2. 点击事件对象

e.target 变成了 wujie-app​
原因: 这个问题是浏览器原生的处理
解决方案: 在异步处理时,获取 e.target 的方式需要修改成: (e.target.shadowRoot && e.composed) ? (e.composedPath()[0] || e.target) : e.target

在主应用中,在body上监听click事件,需要通过以上的方法拿到子应用内部dom信息。这是因为子应用的dom是以web component 组件的方式挂载在页面上的。里面的节点信息被隐藏了。