记wujie子应用获取样式link大坑

67 阅读1分钟

先讲下项目背景

  1. 子应用是vite工程,主应用是wujie。
  2. 使用vue-plugin-hiprint打印插件。

现象,独立运行一切正常,作为子应用时提醒 print-lock.css文件找不到。

我看到该插件源码内容,了解会下载样式内容 然后与模板动态生成html字符串,然后渲染。 出现的问题是下载失败。

起初,我以为是wujie子应用document被劫持,导致查找失败,调试对比dom是正常的,最后查看dom中目标link样式标签没有了,被转化了。

既然被转化,那么我在页面mouted其它时间点,使用js动态在插入一个link,预先再准备一份。结果还是提示找不到,难道是插入到主应用去了?反复查找,又一次被修改。

拉取vue-plugin-hiprint代码,修改请求地址,不再依赖于dom查找。

编译后,npm pack为tgz文件,项目本地安装。

以下是wujie处理link逻辑,大坑。

样式沙箱对  link  的处理逻辑(核心原因)

 wujie  为了实现 子应用样式隔离,会对以下场景做特殊处理:

1. 静态  link  标签:子应用  index.html  里的   ,会被  wujie  拦截,提取 CSS 内容,然后动态转换成    标签插入子应用沙箱,同时删除原   (或标记为“已处理”)。 2. 动态插入的  link :若子应用通过 JS 动态创建    加载样式, wujie  也可能会劫持这个过程,同样将 CSS 转为内联   ,避免样式“逃逸”到主应用。

结果:子应用实际 DOM 中,你原本写的    可能已经被移除或替换成   ,所以用  $('link[xxx]')  自然找不到——因为标签类型都变了!