原生的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. JavaScript的数组系列

    数组 今天逆战班的学习主题关于Javascript的数组,主要有数组的概念.创建.分类.方法.遍历.经典算法...... 一.数组是什么呢?怎么写数组呢?数组有多少种呢? 数组的概念 对象是属性的无序 ...

  2. JavaScript入门进阶(二)

    JavaScript进阶入门(二) 转换为数字 使用parseInt() parseInt函数会先查看位置0处的字符,如果该位置不是有效数字,则将返回NaN,如果0处的字符是数字,则将查看位置1处的字 ...

  3. 5W随想

    什么时候都要想5个W:what.where.when.why.who 比如:提bug的时候:这个问题是什么问题,在哪里发现的,什么时候发现的/什么时候修复好,怎么发现的/为什么是bug,谁发现的/指给 ...

  4. python如何用format进行进制转换与如何删除进制前缀

    10进行十进制,十六进制,八进制,二进制的转换:(#:保留进制前缀)对于带着进制前缀的,如"0x"“0o”“0b”,可以直接在后面加上’x’‘o’'b’进行删除:其他的一些小技巧: ...

  5. const 详解

    ​ 简单分类:          常变量        const 类型 变量名  或者   类型 const  变量名          常引用        const 类型& 引用名   ...

  6. JsonFormat 日期少了8个小时?还我

    JsonFormat 后日期少了8个小时什么鬼? 前言 今天测试的时候发现时间对不上,比数据库里的时间少了8个小时?测试小姐姐一顿狂轰乱炸,一点都不温柔. 什么鬼?哪里出了问题?数据库显示的是下面

  7. js获得用户网络状况API

    js获得用户网络状况API 这是一个实验中的功能,目前还有许多浏览器不兼容此功能某些浏览器尚在开发中 1. 网络类型 effectiveType: 可以得到2g,3g,4g connectionInf ...

  8. 谈谈一些逻辑相同,性能差异却很大的sql

    总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...

  9. 可运行jar包的几种打包/部署方式(转)

    转自:https://www.cnblogs.com/yjmyzz/p/executable-jar.html java项目开发中,最终生成的jar,大概可分为二类,一类是一些通用的工具类(不包含ma ...

  10. ComplexBrowser: a tool for identification and quantification of protein complexes in large-scale proteomics datasets(大规模蛋白组学数据集中鉴定和定量蛋白复合物)

    文献名:ComplexBrowser: a tool for identification and quantification of protein complexes in large-scale ...