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的变化,该方案也无法使用。