history.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特性）

history.pushState的实际使用笔记相关推荐

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的 ...
ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...
操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.历史记录前进与后退 1.后退: window.history.back() -- 相当于用户在浏 ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL
阻页面后退防止页面关闭 <!DOCTYPE html> <html> <head><title>阻止微信后退按钮</title> < ...
history.pushState()
history.pushState()解释向浏览器历史添加了增加一个记录. history.pushState(stateObject, title, url); stateObject:状态 tit ...
History.pushState(),动态添加历史记录.页面离开如何保存状态?
History.pushState() History API 在 HTML 文档中,history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state). 语法 his ...

history.pushState的实际使用笔记

history.pushState的实际使用笔记相关推荐

最新文章

热门文章