原生的js操作实现通过对URL的监控获取参数
原生的js操作实现通过对URL的监控获取用户的操作信息
优化网站的时候,因为列表是用vue组件进行循环渲染,就出现了一个问题,单击跳转的问题,想了很多方案,使用js函数的方式面对这种情况并不乐观,想到学校OJ用的就是用#附加参数,搜了一下大佬们博客,搞了一个监控URL完成跳转。
主要是这些点:
- 给每一个文章附加一个按钮,实质是链接标签,绑定一下参数与文章号,
<a v-bind:href="'#id='+psgmsg.blogId" class="btn btn-primary">Have a look</a>
- 添加的参数被监听器捕获,进行页面跳转,参数附加在Get类型的参数中,交给另一个页面操作
- 对网站的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的监控获取参数的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS原生父子页面操作
var api = frameElement.api; //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- JS操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- JS操作cookie以及本地存储(sessionStorage 和 localStorage )
JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...
- (转)JSON数据格式和js操作json总结
原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com | vince ...
- JS操作JSON总结(转)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
随机推荐
- @常见的远程服务器连接工具:Xshell与secureCRT的比较!!!(对于刚接触的测试小白很有帮助哦)
现在比较受欢迎的终端模拟器软件当属xshell和securecrt了. XShell绝对首选,免费版也没什么限制,随便改字体随便改颜色随便改大小随便改字符集,多窗口,也比较小巧,而SecureCRT界 ...
- Nacos 数据持久化 mysql8.0
一.问题描述 直接下载的稳定版本nacos编译后的文件,不支持mysql8及其以上版本,按照官网文档:https://nacos.io/zh-cn/docs/deployment.html 执行完成之 ...
- nes 红白机模拟器 第5篇 全屏显示
先看一下效果图 放大的原理是使用最初级的算法,直接取对应像素法. /*================================================================= ...
- Spark入门(一)--用Spark-Shell初尝Spark滋味
Spark-Shell的使用 执行scala命令的spark-shell 进入spark的sbin目录,打开键入 ./spark-shell 即可进入spark-shell的目录 spark-shel ...
- Java多线程并发02——线程的生命周期与常用方法,你都掌握了吗
在上一章,为大家介绍了线程的一些基础知识,线程的创建与终止.本期将为各位带来线程的生命周期与常用方法.关注我的公众号「Java面典」了解更多 Java 相关知识点. 线程生命周期 一个线程不是被创建了 ...
- (转)协议森林06 瑞士军刀 (ICMP协议)
协议森林06 瑞士军刀 (ICMP协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 到现在为止,我们讲解了网络层中最重要的I ...
- Git 基础入门
目录 git安装 基本设置 创建版本库 相关概念 将代码提交到分支仓库 版本回退 代码修改 撤销修改 文件删除 github 远程仓库 添加远程仓库 克隆远程仓库 分支操作 忽略特殊文件 git安装 ...
- python获取群成员信息
#coding: utf-8 import itchat,datetime from itchat.content import TEXT itchat.auto_login(hotReload=Tr ...
- Java中static和final的解析
static关键字和final关键字是Java中一个难点&重点.本文通过static的用途.常见问题.final的用途.final常见问题,以及static和final的对比来解释这两个关键字 ...
- Maven+JSP+Servlet+JDBC+Mysql实现的dbExper宾馆管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/mafulong/databaseExper-hotelMaster 这次分享的也是毕设或课程设计选择一样很多的宾 ...