全局监听url跳转,并记录返回。

4,067 阅读1分钟

1.尝试onhashchange 只能监听 前进后退事件 和 hash 的变化

2.尝试 onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
1)关闭浏览器窗口
2)通过地址栏或收藏夹前往其他页面的时候
3)点击返回,前进,刷新,主页其中一个的时候
4)点击 一个前往其他页面的url连接的时候
5)点击事件触发的跳转
但无法获取url的变化,且只支持PC端。

3.尝试添加自定义事件

history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

相比hash的变化,添加了历史改变的监听。

4.想尝试nginx的ip拦截记录,但外链根本就不访问我们服务器所以,该方案也不行。

5.参照 CSDN 封装了如下函数 输入图片说明

let middleJump = function (el = 'a') {
    $(el).on('click', function (e) {
        let href = $(this).attr('href') || '';
        url = ''; //跳转前网页
        hrefRegExp(href) ? (url = href) : (url = url + '?target=' + encodeURIComponent(href));
        e.preventDefault();
        href && window.open(url, '_blank');
    });
};

let hrefRegExp = function (href) {
    let reg = "" //正则
    return reg.test(href);
};

注意:该方法如果全局使用需要会监听所有a标签,恐有性能问题,但可以在用户使用自定义a标签的页面使用

6.使用jQuery.ajaxStart 方法

该方法类似于请求vue的拦截,可以在所有ajax请求前进行操作,但因无法获取url的变化,该方案也无法使用。