pushstate
history.pushstate是HTML5的特殊,IE8+支持
意思是在不刷新浏览器的情况下给浏览器记录插入队列的意思.
“插菊花“
参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
history.pushState(state, title, url);
state:这个属性没用过,这里不讲它
title:几乎没有浏览器支持
url:重点!!包含不同的值,能带来不一样的“插菊花”style
下面详细解说各种style,come on,baby!!!~~.~~~
1.包含“#”,修改HASH,javascript的APPlication program interface对应的是location.hash
history.pushState('','',"#"+i);
2.包含“?”,修改的是search,JavaScript的application program interface对应的是location.search
history.pushState('','',"?bb="+i);
3.包含“?&”,如果你用的是2的方案同时原本的location.search就已存在了,你的search会被“插菊花”干掉,如果一开始你链接是没有考虑search的,后期你可能会被老板怼死,好多第三方来源的统计没了,
例如:
你的链接是:192.168.0.209:998/index.html?a=a&b=b
你的js代码是:
history.pushState('','',"?bb="+i);
或者是你聪明的你很快想出来的酱紫来解决以上问题:
代码②
var b = location.pathname+location.search;
for (leti=0;i<10;i++) {
history.pushState('','',b+"?&bb="+i);
}
但,很快就能发现:
http://192.168.0.209:998/index.html?a=a&b=b?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=7?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9(省略1000.....次)
你的用户访问的地址进入出现了N次这种情况。
可是,可是,你的代码没问题呀。
问题在于,你没有刷新,试一下刷新1次?2次?N次
你发现你的插菊花真的是在double插(新增浏览器历史记录(插)的同时给原来的浏览器地址字符串追加内容(插)),啊哦,酸爽吧
其实把“&”这个东西理解了,其实能理解为什么这里会是这样处理,“并,同时,共存”
4.“不包含[#,或者?或者&,或者三者混搭的]纯字符串”,例如:
你的原链接是:http://192.168.0.209:998/dir/index.html
for (leti=0;i<10;i++) {
history.pushState('','',"咯咯哒咯咯哒"+i);
}
效果:http://192.168.0.209:998/咯咯哒咯咯哒9
链接看起来也很美观
但!!
刷新下后
404
这里修改的是path,javascript的application program interface对应的是location.patchname,他会把文件目录以及文件名干掉,所有浏览器找不到资源路径
解决方法:
1.后端指定文件输出
被喷:!!!!!!
xx1:你一个静态页面为什么要我改,凭什么
xxx2:不是吧,改个页面要改架构
xx3:就改个页面有这么麻烦么
好吧,这个真的不实在。
5.禁止回退,6吧,(✪ω✪)
history.pushState(null, null, location.href);
window.addeventlistener("popstate", e => {
history.pushState(null, null, location.href);
});
本文章到这里暂时结束,更多内容请关注上一篇(监听浏览器hash变化和html5 pullstate特性)
相关阅读
标题的使用 标题的使用格式 标题Typora显示形式是 文本居中 文本居中使用格式 文本居中在Typora中显示形式是
sscanf跟scanf类似,只不过sscanf是扫描字符串,而scanf是扫描标准输入,用得好的话会给解析带来极大的便利性,用的不好的话,可能导致程
关于 @Transient 第一次看到这个注解,于是百度一下.实体类中使用了@Table注解后,想要添加表中不存在的字段,就要使用@Transient这个
hadoop的FileSplit简单使用FileSplit类继承关系:FileSplit类中的属性和方法:作业输入:[java] view plain copy print?hadoop@hado
ISO和模板文件的管理 ISO和模板文件通过HTTP或HTTPS协议上传到二级存储中。CloudStack中的模板分为三种:系统模板,内置模板和用户