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

您所在的位置:网站首页 js监控网页变化 全局监听url跳转,并记录返回。

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

#全局监听url跳转,并记录返回。| 来源: 网络整理| 查看: 265

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3