原生的js操作实现通过对URL的监控获取参数

原生的js操作实现通过对URL的监控获取用户的操作信息

优化网站的时候,因为列表是用vue组件进行循环渲染,就出现了一个问题,单击跳转的问题,想了很多方案,使用js函数的方式面对这种情况并不乐观,想到学校OJ用的就是用#附加参数,搜了一下大佬们博客,搞了一个监控URL完成跳转。
主要是这些点:

  1. 给每一个文章附加一个按钮,实质是链接标签,绑定一下参数与文章号,
<a v-bind:href="'#id='+psgmsg.blogId" class="btn btn-primary">Have a look</a>
  1. 添加的参数被监听器捕获,进行页面跳转,参数附加在Get类型的参数中,交给另一个页面操作
  2. 对网站的URL进行#为分隔符的划分,然后对每个部分用=为分隔符的划分,然后遍历找到id字符,取出下一个值

代码如下

//监听触发操作
       function hashChange(){
           var query = window.location.href;
           var vars = query.split("#");
           for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == "id"){
                   window.location="./blog.html?id="+pair[1];
               }
           }
       }

//url变化监听器
       if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
           // 浏览器支持onhashchange事件
           window.onhashchange = hashChange;  // TODO,对应新的hash执行的操作函数
       } else {
           // 不支持则用定时器检测的办法
           setInterval(function() {
               // 检测hash值或其中某一段是否更改的函数, 在低版本的iE浏览器中通过window.location.hash取出的指和其它的浏览器不同,要注意
               var ischanged = isHashChanged();
               if(ischanged) {
                   hashChange();  // TODO,对应新的hash执行的操作函数
               }
           }, 150);
       }
发布了53 篇原创文章 · 获赞 5 · 访问量 8278

猜你喜欢

转载自blog.csdn.net/weixin_44494373/article/details/104043891