原生的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);
}

原生的js操作实现通过对URL的监控获取参数的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  3. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  4. JS原生父子页面操作

    var api = frameElement.api;  //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...

  5. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  6. JS操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  7. JS操作cookie以及本地存储(sessionStorage 和 localStorage )

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  8. (转)JSON数据格式和js操作json总结

    原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com |         vince ...

  9. JS操作JSON总结(转)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

随机推荐

  1. 微信APP生命周期、页面生命周期

    目录 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注 ...

  2. java开发——Cloneable接口、clone()方法和深浅拷贝

    1.实现Cloneable接口表明该类的对象是允许克隆的. 2.允许克隆的意思是:可以调用clone()方法. 3.深拷贝还是浅拷贝,取决于如何重写Object的clone()方法. 4.原对象和克隆 ...

  3. 上线前测试的bug,要不要处理,跟版本的关系

    最近有两个项目是在旧版本上实施的.上线前经过一轮测试后,发现了一些产品(我们的产品确实不稳定) 在这个项目上,修改产品bug是肯定的.但是要不要追踪这些bug? 这就跟版本使用范围有关系了,毕竟要考虑 ...

  4. ubuntu16.04 + caffe + SSD + gpu 安装

    昨天我们买好了硬件,今天我们开始安装caffe了,我本人安装过caffe不下10次,每次都是一大堆问题,后来终于总结了关键要点,就是操作系统. 1. 千万不要用ubuntu17.10来安装, 2. 最 ...

  5. python常用软件包

    redis数据库: 链接:https://pan.baidu.com/s/1X_ndCj0scF2WZd2FPLRKag 提取码:e3zm git安装包: 链接:https://pan.baidu.c ...

  6. gcc错误[Error] ld returned 1 exit status

    出现这个错误的原因是:(目前遇见两种情况了) 你的编译器正在执行刚刚的程序还没关:小黑框还在. 解决措施:关闭就好. 定义的函数和调用的函数名字不一样,也会造成产生这种错误!!!代码如下: bool ...

  7. jQuery实现鼠标移入切换图片

    初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...

  8. 简单认识并使用JavaScript【供后端人员作为了解】

    JS(JavaScript)Web的脚本语言 脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用 作用:控制页面特效展示 注:JavaScript没有访问系统的权限,并且JavaScript和Ja ...

  9. JVM 参数及各部分含义(转)

    转自:https://www.jianshu.com/p/1c6b5c2e95f9 JVM参数分类 JVM参数分为标准参数和非标准参数: 标准参数: "-"开头的参数,如-clie ...

  10. AspNetCore3.1_Secutiry源码解析_4_Authentication_JwtBear

    title: "AspNetCore3.1_Secutiry源码解析_4_Authentication_JwtBear" date: 2020-03-22T16:29:29+08: ...