js 怎么监听到页面关闭或页面跳转事件

Posted 2023-05-10

参考技术A 两者都是在对页面的关闭或刷新事件作个操作。

不同点：

1.unbeforeunload（）事件执行的顺序在onunload()事件之前发生。(因为，unbeforeunload()是在页面刷新之前触发的事件，而onubload()是在页面关闭之后才会触发的)。
2.unbeforeunload（）事件可以禁止onunload()事件的触发。
3.onunload()事件是无法阻止页面关闭的。
4.浏览器的兼容

layui实现关闭一个选项卡之后刷新另一个选项卡的数据

 场景：某供应商模块，有新增、编辑操作，对数据进行更改后，关闭新增或编辑页面，原页面数据刷新

 

 

 

思路：1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location.reload()即可。

　　　　百度许久无果，故放弃。

　　　2、在新增或编辑操作完成时，重新发送供货商的页面请求,起初总是用内置的refresh()、reload()、refreshTabs()等方法一通乱试，也想过用ajax重新请求后台供应商页面，但都无效或有差错，最后选择关闭tab页再重新打开就好,虽然很笨，但用户并不能感觉到，且能实现数据刷新，下面时主要代码。

form.on(‘submit(save)‘, function (data) 
    data.field.status = data.field.status ? 0 : 1;
    $.ajax(
        type: "POST",
        url: siteurl + ‘/sys/supplier/save‘,
        data: JSON.stringify(
            ‘supplierInfo‘: data.field,
        ),
        async: false,
        dataType: "json",
        contentType: ‘application/json;charset=UTF-8‘,
        success: function (r) 
            if (r.code === 0) 
                if (r.re !== 0) 
                    pLayer.confirm(‘保存成功，是否返回？‘, 
                        btn: [‘返回‘, ‘继续添加‘]
                    , function () 
　　　　　　　　　　　　　　//关闭弹出框（提示返回或继续添加）
                        pLayer.closeAll();
　　　　　　　　　　　　　　//先关闭供货商模块，然后再次打开，此时可以实现数据刷新
                        parent.app.closeTab(398);
                        parent.app.addTab(
                            url: siteurl + ‘/sys/supplier/searchlist‘,
                            icon: ‘‘,
                            title: ‘供货商‘,
                            id: ‘398‘//menuId
                        )
　　　　　　　　　　　　　　//此刻再关闭新增或编辑页面
                        parent.app.closeTab(75);//75为选项卡id，也对应了menuId，id可以通过F12，element中查看
                    );
                
                else
                    pLayer.alert(‘添加失败！‘);
             else 
                pLayer.alert(r.msg);
            
        
    );
    return false;
);