Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

页面刷新后,浏览器回退按钮点击多次无反应 #308

Open
BARMPlus opened this issue Dec 6, 2022 · 14 comments
Open

页面刷新后,浏览器回退按钮点击多次无反应 #308

BARMPlus opened this issue Dec 6, 2022 · 14 comments

Comments

@BARMPlus
Copy link

BARMPlus commented Dec 6, 2022

描述bug
wujie体验下来效果不错,接入成本也比较低,但是发现刷新页面以后,会导致回退按钮无法生效。
这个问题比较硬伤,是否有解决方案,有具体方案或者思路的话,可以帮忙解决。
参:#223

@yiludege
Copy link
Collaborator

yiludege commented Dec 6, 2022

这个问题可以这么理解,一个SPA应用刷新后也是没办法后退的,为什么到了微前端这里就要求这种没办法实现的能力呢,或者说你这个硬伤什么场景下是已经解决了的,我比较好奇

@BARMPlus
Copy link
Author

BARMPlus commented Dec 6, 2022

我详细描述下,依次进入/baseroute/a > /baseroute/b > /baseroute/c > /baseroute/d,然后刷新页面,接着点浏览器回退按钮,点击后,导航地址未变化且视图未更新,实际应该是要返回到/baseroute/c。接着继续点击浏览器回退按钮,视图和导航地址依然未更新,多次点击后,会直接回到/baseroute/a的页面。

@BARMPlus
Copy link
Author

BARMPlus commented Dec 7, 2022

这里提供一个VueRouter的例子,
https://github.com/BARMPlus/vue-router-test

yarn 
yarn start

切换路由以后,再刷新页面,浏览器的回退按钮可以回到上一个视图且导航栏地址有更新 @yiludege

我看了其他的微前端框架,不会出现刷新后导致浏览器的后退按钮失效
https://zeroing.jd.com/micro-app/demo/react16/
因为wujie使用了iframe,我怀疑是不是和它有关系

@yiludege
Copy link
Collaborator

yiludege commented Dec 7, 2022

我一直以为 SPA刷新了之前的路由就回不去了...,我好好看看

@yiludege
Copy link
Collaborator

yiludege commented Dec 7, 2022

确实和 iframe 相关,我已经在上面的 issue 回答了

image

但是可以试试这个路由耦合方案,刷新还是可以回退的,但是好像也受原来的 iframe 记录的影响,导致要回退两次才能成功:

image

@BARMPlus
Copy link
Author

BARMPlus commented Dec 7, 2022

这个方案,子应用需要加逻辑,应用耦合会有点重。
而且子应用可能通过push跳转,也可能通过replace跳转,每次跳转需要通知父应用去进行跳转,子应用是replace的话,父应用也要replace跳转,子应用是push话,父应用也要push跳转。
而且子应用携带query的情况下,处理起来会更麻烦。

@yiludege
Copy link
Collaborator

yiludege commented Dec 7, 2022

是的,所以目前没有很好的办法

@BARMPlus
Copy link
Author

BARMPlus commented Dec 7, 2022

@yiludege
我这里提供一个仓库,
https://github.com/BARMPlus/wujie-route-test

目录src/components/a.vue,加key的情况下,刷新后浏览器的后退正常,不加key的情况刷新后就会出现浏览器后退失效(和现在的情况一模一样)

  <div class="a">
    <button @click="handleClick">更换src</button>
    <iframe width="100%" height="800px" :src="iframeSrc" :key="iframeSrc" />
<!--    <iframe width="100%" height="800px" :src="iframeSrc" />-->
  </div>

测试步骤

1.克隆项目
2.启动项目
3.多次点击网页中的”更换src“按钮
4.刷新,点击浏览器后退按钮
5.发现功能正常

如果使用不加key的情况,就会和之前的问题一样。
参考文章:https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/

与框架无关的解决方案是在每次需要更改其 src 时销毁 iframe 并重新创建它,而不是重用以前使用的 iframe,
仅仅更改其源属性。你可以通过用一个新的 iframe 节点替换掉 iframe 节点,在普通的 JavaScript 中很容易做到这一点:

const parentNode = document.querySelector('.iframe-container');
const oldIframe = document.querySelector('iframe');
const newIframe = oldIframe.cloneNode();
newIframe.src = 'some/other/source';
parentNode.replaceChild(newIframe, oldIframe);

是不是可以用类似的方式,修复好这个问题。

@yiludege
Copy link
Collaborator

yiludege commented Dec 7, 2022

其实是两码事情,上面的问题是复用了 iframe 并且修改了 src ,导致 iframe 往浏览器 history 记录里面添加了记录

image

加了 key 就可以避免复用 iframe 从而不会往浏览器 history 记录添加记录,所以功能可以正常

但是无界的场景是 子应用运行在 iframe 里面,而且会路由跳转,所以必然会往浏览器 history 记录里面添加记录

刷新浏览器后 iframe都销毁了,承载子应用的是新的 iframe,再回退浏览器浏览器无法作用到新的 iframe 上的

@BARMPlus
Copy link
Author

BARMPlus commented Dec 7, 2022

是的,iframe内也会路由跳转,看来暂时没有解决方案了。

@nonjene
Copy link

nonjene commented Apr 6, 2023

可能通过 bridge 告诉 iframe 内的应用做路由跳转,而不是直接改 src 可以解决? 同时宿也同步 push 一个 state

@dduuxxuu
Copy link

这是个棘手的问题,使用到一半不知道后续怎么搞了

@wizardpisces
Copy link

最新版的还是有问题

有进展了么?

@xinlanlan
Copy link

xinlanlan commented Apr 16, 2024

目前,我的解决是修改子应用的跳转代码,封装一个跳转方法:
this.$router.push, replace等操作的时候,通知主应用做跳转,这个时候history中会增加一条记录(如果是replace操作,主应用也做对应的replace操作),然后子应用收到父应用的跳转信息之后,如果是vue-router,那么就进行this.$router.replace操作,统统用replace操作。
这样目前是可以解决,倒退两次,或者刷新页面无法会退的问题的。
但是有一个坑点就是:vue-router的路由守卫中如果用到location相关的就会报错,注意使用window.parent.location

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants