SevLen
SevLen
  • 发布:2023-04-03 16:30
  • 更新:2023-04-25 11:27
  • 阅读:295

B页面刷新后 点击浏览器的返回按钮,B页面的unload事件不触发?

分类:uni-app

A页面跳转至B页面,B页面未刷新,点击浏览器的返回按钮,B页面触发unload事件
A页面跳转至B页面,此时刷新B页面,点击浏览器的返回按钮,B页面不会触发unload事件

因为B页面是一个websocket页面,我希望B页面刷新后,点击浏览器的返回按钮,在B页面的unload事件中断开websocket,但事实上并没有触发到Unload事件,请问有什么好的解决方法吗?

是因为浏览器的BF Cache问题吗?

2023-04-03 16:30 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

测试未复现该问题,请检查代码逻辑,如确认框架问题,提供最简可复现demo

  • SevLen (作者)

    麻烦看下下面的代码 确认你触发的时机

    是刷新B页面后 点击浏览器的后退按钮 unload不会触发

    如果是A->B 不刷新B 返回A unload才会触发

    2023-04-04 09:19

  • DCloud_UNI_WZF

    回复 h***@163.com: 是按你的描述操作,未复现,如确认框架问题,私信提供下远程方式看下

    2023-04-04 09:46

SevLen

SevLen (作者)

A页面

<template>  
    <view class="">  
        这是AAAA  

        <u-button @click="goB">去往B</u-button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  

        methods: {  
            goB() {  
                uni.navigateTo({  
                    url: '/ModuleCenter/test/B'  
                });  
            }  
        }  
    }  
</script>

B页面

<template>  
    <view class="">  
        这是BBBBB  
    </view>  
</template>  

<script>  
    export default {  
        onLoad() {  
            console.log('B onLoad')  
        },  
        onUnload() {  
                        // 刷新B页面后 点击浏览器的后退按钮 是不会触发的  
            console.log('B onUnload')  
        },  
    }  
</script>  
SevLen

SevLen (作者)

看文档说 H5刷新后页面栈丢失了 那B页面刷新后 一直存在 不会被卸载?

DCloud_UNI_WZF

DCloud_UNI_WZF

vue2 复现该问题,感谢反馈,已加分

星拾夜暝

星拾夜暝

是的,当用户在B页面刷新后,B页面的unload事件不会被触发。这是因为刷新页面时,浏览器会重新加载页面并替换当前的浏览历史记录条目,这会导致浏览器不会将B页面视为历史记录的一部分。

因此,当用户在B页面刷新后,浏览器会将B页面的URL替换为新的URL,并且B页面的unload事件不会被触发。当用户点击浏览器的返回按钮时,浏览器会从历史记录中加载前一个页面,并且不会重新加载B页面
具体请参考:
https://www.cnblogs.com/mo3408/p/17285879.html

  • SevLen (作者)

    那B页面的事件要怎么注销呢?

    2023-04-04 11:46

  • 星拾夜暝

    回复 SevLen: 要注销B页面的事件,可以在页面卸载时使用unload事件将事件处理程序从元素中删除。例如:


    javascript

    window.addEventListener('unload', function() {

    // 删除事件处理程序

    document.getElementById('myButton').removeEventListener('click', myButtonClickHandler);

    });

    在上面的示例中,当B页面卸载时,将删除ID为“myButton”的元素的click事件的事件处理程序“myButtonClickHandler”。您可以根据需要更改元素ID和事件处理程序名称。

    2023-04-04 11:49

  • SevLen (作者)

    回复 星拾夜暝: 这是无效的

    2023-04-04 14:01

星拾夜暝

星拾夜暝

可参考以下:

SevLen

SevLen (作者)

一个月了有动静吗

要回复问题请先登录注册