「wujie」微前端应用:子应用使用window.location.href

763 阅读1分钟

使用wujie接入微前端,如果子应用的下载功能使用window.location.href赋值会导致子应用被空白iframe替换。

exportFn() {
  window.location.href = 'https://test.xlsx';
}

在主应用中触发子应用的下载操作,则会出现如下页面:

image.png

针对这个问题,官方给出的解释是这样的:

预期行为,调用window.location.href会将当前子应用隐藏,并且生成一个新的iframe替换,如果子应用配置路由同步,浏览器可通过回退回到子应用,demo有对这个问题做过解释

那么如何解决呢?

下载功能可通过借用a标签来替换window.location.href,即将代码修改如下:

exportFn(){
    const aLink = document.createElement('a');
    aLink.href = 'https://test.xlsx';
    aLink.click();
}