必威体育Betway必威体育官网
当前位置:首页 > IT技术

history.pushState的实际使用笔记

时间:2019-09-30 05:43:14来源:IT技术作者:seo实验室小编阅读:66次「手机版」
 

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.后端指定文件输出

2.dir不要和服务器文件夹关联

被喷:!!!!!!

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显示形式是 文本居中 文本居中使用格式 文本居中在Typora中显示形式是

警惕sscanf的使用

 sscanf跟scanf类似,只不过sscanf是扫描字符串,而scanf是扫描标准输入,用得好的话会给解析带来极大的便利性,用的不好的话,可能导致程

关于 @Transient 注解 的使用

关于 @Transient 第一次看到这个注解,于是百度一下.实体类中使用了@Table注解后,想要添加表中不存在的字段,就要使用@Transient这个

FileSplit简单使用

hadoop的FileSplit简单使用FileSplit类继承关系:FileSplit类中的属性和方法:作业输入:[java] view plain copy print?hadoop@hado

CloudStack的基本使用

ISO和模板文件的管理 ISO和模板文件通过HTTP或HTTPS协议上传到二级存储中。CloudStack中的模板分为三种:系统模板,内置模板和用户

分享到:

栏目导航

推荐阅读

热门阅读