1、背景：同事去学校做毕设请假，今天帮他修改h5bug
2、遇到的问题：移动端App打开某个网页会自动弹出一个对话框，这个对话框出现的不合时宜，因为需要是在页面做一些操作后点击原生顶部的返回按钮再弹出对话框
3、具体问题就是popstate造成的
4、原来的代码：
window.addEventListener('popstate', function() {
var btnArray = ['我要退出', '继续计数'];
mui.confirm('正在计数哦，确定要退出吗？', '提示', btnArray, function(e) {
if(e.index == 1) {
pushHistory();
setBack();
5、修改后的代码：
window.addEventListener('load', function() {
setTimeout(function() {
window.addEventListener('popstate', function() {
var btnArray = ['我要退出', '继续计数'];
mui.confirm('正在计数哦，确定要退出吗？', '提示', btnArray, function(e) {
if(e.index == 1) {
pushHistory();
setBack();
6、暂且先解决问题，日后有时间继续深入研究
7、说说过去
以前浏览器操作浏览器历史记录主要依据history对象。在它的proto继承有back、forward、go等函数，那么什么是popState？简而言之就是HTML5新增的用来控制浏览器历史记录的api。
8、怎么用？
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。
history.pushState(data,title,url);
//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；
replaceState用法类似，例如：history.replaceState(“首页”,”“,location.href+ “#web”);
两者区别：pushState会改变history.length，而replaceState不改变history.length
9、有坑吗？
popstate事件在webkit中的很诡异。popstate是HTML5的History系列中的事件，但是这玩意儿在webkit中的行为相当让人蛋疼。这回连IE10都站在了Firefox这边，至少这边的实用性强的多。虽然官方的文档中对popstate的描述也没有细节上的描述，不过以我的逻辑来判断，这货是就webkit的BUG。
Html5这套ApI和传统的history不同，或者说这套API是“session history entries”。
注意注意：Html5种的HistoryAPI是不会使页面跳转的，只是操作地址栏和相应的state属性而已，而且它是手动操作的。浏览器默认的History还是传统的那一套，虽然它们在浏览器上都使用同一个“历史记录堆栈”。
对这个差异的认知就是webkit中诡异行为的原因。webkit并没有把HTML5的History和传统的区分开，而根据官方文档对popstate的描述，只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。所以在webkit中，无论是刷新还是访问一个新网页都会触发popstate。而其它浏览器中这个popstate仅作用于HTML5的History，并不响应传统的History，更不用说刷新和访问新网页的情况了。
原因找到了，那么解决方案呢？
1、对popstate延迟绑定的方法，因为popstate会在页面加载完成之后不久触发，所以在setTimeout一段时间后再绑定事件，popstate的第一次就不会轻易被webkit夺走了
2、判断浏览器再做调整，直接针对webkit在页面加载完成后第一次触发的popstate屏蔽了
本文已收录于以下专栏：
相关文章推荐
1、onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；
2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行操作...
Html5 onpopstate 事件禁止手机设备上的返回操作
上一篇文章中，我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在下面几个问题：
1.使用location.hash会导致地址栏的url发生变化，用户体验...
用ajax，pushState()，popstate实现浏览器前进后退页面局部刷新
AJAX技术对我们前端产生了巨大影响
可以让我们的页面无刷新操作减少网络请求
但是它也产生了一些问题
不能够使用浏览器的前进与后退
（后退是浏览器非常常用的按钮）很久很久以前，Gmail借助i...
history.state
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。
popstate是HTML5的History系列中的事件，但是这玩意儿在webkit中的行为相当让人蛋疼。虽然官方的文档中对popstate的描述也没有细节上的描述，不过以我的逻辑来判断，这货是就we...
window.onpopstate是popstate事件在window对象上的事件句柄.
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触...
最近需求需要,需在浏览器(web 和 h5手机端)实现回退弹框
网上很少找到这个需求,找到的也是有bug的,最后解决了,分享一下问题和解决方案
用到的函数:window.history.pushS...
1、onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；
2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)前端bug积累 - 简书
前端bug积累
Touchstart和Touchmove一起触发
问题：在某些特定低端安卓机上，如果同时使用了iscroll和默认的touchstart，touchmove和touchend事件，那么此时按住绑定触摸事件的dom不松开，touchstart和touchmove会一起触发！如果刚好是想做长按效果，这时touchstart下的定时弹框必然无法弹出
方法：在touchmove事件中对较touchstart和touchmove时的touches坐标，如果不相同即在touchmove事件中清除touchstart中的弹框定时器
Touchend不触发
问题：Android4.X版本中的某些机型会存在touchend和touchmove(连续)不触发的现象，体现在你滑动长列表的时候
方法：1.在touchstart事件中加入e.preventDefault()；2.同时绑定touchcancel和touchend事件；3.定时器捕捉滚动列表的scrollTop值，如果值相等了，停止计时器，执行"touchend"操作
IOS下Fixed定位失效
问题：IOS环境下，如果页面体很长，又存在设置了fixed定位的元素，获取焦点后，此时fixed元素位置失效
方法：1.获取焦点时设置为相对定位，失去焦点时设置为绝对定位；2.给所有最外层容器都设置fixed定位，涉及滚动的部分设置overflow:scroll
IOS下onResize事件无效
问题：当你想监听视口变化的时候，确切的说你监听输入法键盘抬起和收回的状态时，onResize是无效的
方法：抬起键盘时，监听输入框的焦点事件；键盘收回时监听失去焦点事件
IOS下Fixed定位的输入框横屏旋转的Bug
问题：当你用fixed定位了输入框，此时点击获取焦点后，如果进行横屏旋转，保持焦点旋转回来，所有页面被波及，体现为全部滑不动了
方法：具体环境是微信中。我在其中一个页面使用捕捉横屏，然后马上触发失去焦点，然后横屏旋转回来，不会触发；但是在另一个页面中，此方法却无效。没完全理清原因，暂无解决方案
IOS下Web存储loaclStorage使用
问题：微信环境下，如果使用了loaclStorage存储，点击微信清理存储空间是清理不了这个存储数据
方法：removeItem(缓存名)
IOS下Html5离线缓存应用
问题：可能是我这边离线缓存操作也并不系统规范，因优化考虑启用了离线缓存，后面因其他原因要撤销掉它。然后不管是重新指定NETWORK目录，还是html根节点取消manifest清单文件和更新等方法，微信清理存储空间，离线缓存一直还在
方法：后来后台直接在服务器端暂时清空对应的‘离线名单’，然后手机端访问直接404，“顽疾”手机的离线缓存才终于消失了。如果有高手很清楚这块，希望不吝赐教！
IOS下Ajax请求数据
问题：IOS下从左至右回退到上一页，页面是通过ajax异步填充数据的，此操作回来数据依然没有变化，不管该页面数据实际上是否已经发生变化，存在于这种从左至右回退页面的情况中
方法：好像是纯粹刷新当前就可以请求到最新数据，不太记得了。反正大概是这么个情况，最后是在请求地址上加了随机后缀才保证数据返回的为实时最新的
onPopstate事件在Webkit中的Bug
问题：体现在微信中，一部分低端机会在侦听onpopstate事件后马上触发一次onpopstate事件，查阅资料发现这属于webkit内核的游览器对onpopstate事件支持的缺陷。(PS:但是我本人亲测了iphone6s在未升级9.3版本时，也能触发这个bug，IOS9.3和部分高端机高版本安卓系统不会有这种bug)
方法：1.设置定时器进行延迟，等页面载入完毕后再侦听该事件(网友提供，觉得不靠谱)；2.直接针对webkit游览器做第一次触发的忽略；3.问题来了，经测试，很多高端机型缺陷已被修正，不会在第一次触发onpopstate事件，那么那些低端版本的又会触发，我该怎么办...求指教
IOS下Iscroll4滑动列表卡在中间
问题：当iscroll4渲染的列表滑动到底部后，如果此时滑动趋势过大偏上，列表会卡在中间，只有点击才会回位
方法：onScrollMove方法中控制滑动距离，保证在卡位bug的距离之内
IOS下Iscroll4列表横屏旋转后的bug
问题：当iscroll渲染的列表被旋转后，再旋转横屏回来后，偶尔会出现滑不动的现象
方法：旋转事件中及时启用refresh()方法重置
IOS下Iscroll4列表横屏旋转后的bug2
问题：当初次从微信公众号里面点击进入页面，如果此时刚好恰逢横屏模式，页面横屏初次显示，然后竖屏回来，iscroll列表会偏上，前提是列表的内容体上下还有刷新元素div模块(上拉加载，下拉刷新部件)
方法：初始化refresh()刷新，横屏事件回调中继续refresh()刷新+scrollTo()方法重置位置。首次修改时，我确实是验证通过了，后来不知道什么原因(多人协作)，又提出了这个问题，此方法好像没用了，因为这种点击公众号+横屏进入页面的情况实属少见，暂时没深究了。
IOS下Iscroll4列表滑动操作的bug
问题：当滑动iscroll列表的时候，如果手指紧贴着列表上下频繁小幅度滑动，然后松开，有很大的几率会让列表直接飞到初始0的位置，然后再滑便无法滑动了
方法：onScrollEnd方法中进行refresh()刷新，及时保证重置列表体
IOS下iscroll4列表滑动容易误点跳转
问题：在应用iscroll4的列表页面滑动时，如果列表项绑定了click事件，滑动的过程中很容易误点（没去验证非iscroll4列表的情况）
方法：对较touchstart和touchend中的changedTouches.clientY坐标值，如果相等才符合click点击条件
IOS输入框值获取异常
问题：在做输入框搜索匹配的时候，同时绑定了(keyup/change)和click事件，输入内容后，obj[type]=$(this).val()进行搜索字符存值，此时点击搜索按钮click进行搜索，发现ajax过去的obj[type]值是错误的，比如："你"被变成了"ng"字符，最后发现是(keyup/change)事件的存值错误
方法：搜索click的时候再进行obj[type]=$(‘footer input’).val()取一遍值
placeholder设置的文字偏上
问题：Android4.x部分机型下，通过placeholder设置的文字向上偏移的很厉害
方法：line-height:normal
-webkit-filter: grayscale(100%) 在retina下的模糊问题
问题：对页面应用网站变毁效果，会出现模糊问题
方法：-webkit-filter: grayscale(100%);
css3-translateY移动的抖动问题
问题：当应用单位为百分比的时候，抖动明显
方法：将单位改成px
企业微信端无法触发IOS自动播放
问题：IOS在微信中无法播放音乐，通常会通过微信私有接口“WeixinJSBridgeReady”事件去触发，但是企业微信无效
方法：通过WeixinJSBridge.invoke('showItemMenus',{},function(res){音乐实例.play()})触发
业精于勤荒于嬉，行成于思毁于随！最新碎语：爱玩没错、装逼没错，如果爱玩、装逼和工作结合到一起，那就是乐趣。
您的位置： && popstate事件在webkit中的诡异行为
popstate是HTML5的History系列中的事件，但是这玩意儿在webkit中的行为相当让人蛋疼。这回连IE10都站在了Firefox这边，至少这边的实用性强的多。虽然官方的文档中对popstate的描述也没有细节上的描述，不过以我的逻辑来判断，这货是就webkit的BUG。
HTML5的这一套HistoryAPI和传统的History不同，或者说这一套HistoryAPI是“session history entries”。虽然官方的文档并没有强调它与传统的History不同，但是在使用上就会发现很大差异。HTML5中的HistoryAPI是不会使页面跳转的，只是操作地址栏和相应的state属性而已，而且它是手动操作的。浏览器默认的History还是传统的那一套，虽然它们在浏览器上都使用同一个“历史记录堆栈”。
对这个差异的认知就是webkit中诡异行为的原因。webkit并没有把HTML5的History和传统的区分开，而根据官方文档对popstate的描述，只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。所以在webkit中，无论是刷新还是访问一个新网页都会触发popstate。而其它浏览器中这个popstate仅作用于HTML5的History，并不响应传统的History，更不用说刷新和访问新网页的情况了。
网络上看到的能解决这个问题的貌似也只有一个对popstate延迟绑定的方法，因为popstate会在页面加载完成之后不久触发，所以在setTimeout一段时间后再绑定事件，popstate的第一次就不会轻易被webkit夺走了←_←。不过延迟这种东西我一直都觉得不太靠谱，所以还是果断放弃这种方法了。最后只好使用烂方法，判断浏览器再做调整，直接针对webkit在页面加载完成后第一次触发的popstate屏蔽了。不过毕竟是针对浏览器的东西，虽然目前是可以使用，但是如果以后webkit修复了这个BUG就需要修改代码了。
setTimeout(function () {
& & & & & &window.addEventListener("popstate", backFun, false);
转载请注明本文标题和链接：《》
相关日志：
邮箱（必填）
网址（选填）javascript - Chrome onpopstate / pushState bug? - Stack Overflow
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
First of all I'm not entirely sure what I'm doing or expecting is right. There doesn't seem to be much documentation about this, but what I've read suggests that this should work.
I encountered some problems while trying to use history.pushState so I ended up making a demo page to see what was going wrong.
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&Untitled Document&/title&
&script type="text/javascript" src="/ajax/libs/jquery/1.7.0/jquery.min.js" &&/script&
window.onpopstate = function()
var d = new D
console.log(d.toString());
console.log(document.location.href);
$(document).ready(function()
$('#push').click(function()
var rand = Math.random();
history.pushState( {'number':rand} , 'Test '+rand , '/test/'+rand );
&a href="#" id="push"&New state&/a&
When I click the 'new state' link, I'm expecting to see in the console that the onpopstate function has been fired and I'll see a new url (something like test/[number]).
The location in the address bar in chrome does update, but the onpopstate event never fires.
Then when I click the back button in the browser, it looks like multiple popstate events are firing. It appears that ever time I use the browser navigation buttons, every popstate event that should have fired is happening all at once.
This is kind of hard to explain. Here's what I expect to see in the console.
Load the page. Chrome fires the initial popstate event on page load
popstate.html:13Sat Nov 19 :48 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
Click the 'new state' link. The location in the address bar updates to .
Sat Nov 19 :53 GMT+0000 (GMT Standard Time)
popstate.html:14/test/0.05804
Click the back button in the browser. The url in the address bar returns to /popstate.html
popstate.html:13Sat Nov 19 :27 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
That's what I'm expecting.
Here's what I'm ACTUALLY seeing...
Load the page
popstate.html:13Sat Nov 19 :42 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
Click the new state link. Nothing appears in console. Address bar changes to /test/0.1523
Click back button in browser. Address changes back to /popstate.html
popstate.html:13Sat Nov 19 :42 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
popstate.html:13Sat Nov 19 :57 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
As you can see, it repeats the initial popstate and shows the return to /popstate.html, but it never fires for the pushed sate.
If I now press forward in the browser, I get:
popstate.html:13Sat Nov 19 :42 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
popstate.html:13Sat Nov 19 :57 GMT+0000 (GMT Standard Time)
popstate.html:14/popstate.html
popstate.html:13Sat Nov 19 :58 GMT+0000 (GMT Standard Time)
popstate.html:14/test/0.1523
(They all appear again, here's a screenshot: )
I don't know if I'm doing it wrong, my expectations are wrong, or this is actually a bug?
Thanks in advance to anyone who read all of this and can shed some light on it for me.
Chrome's console.log cannot handle things nicely when you're going to other pages. You can confirm this because it logs several things at once with other timestamps (which cannot be possible). You'd better use $("body").append to log here (or appending to some other element).
Secondly, when you push a state, then obviously it is not popped, so the popstate event is not triggered. If you want to trigger the onpopstate handler when you're pushing a state as well, you can create a simple wrapper like this: .
function load(url, state) { // normally load AJAX stuff here
$("pre").append(new Date
+ "\n" + url
+ "\n" + JSON.stringify(state) // to log object as string
+ "\n\n");
function pushState(data, title, url) {
history.pushState(data, title, url);
load(location.href, data); // call load function when pushing as well
window.onpopstate = function(e) {
load(location.href, e.state);
$("button").click(function() {
pushState({foo: "bar"}, "test", "/test?a=b"); // sample push
Edit: This is already .
102k48251327
if(navigator.userAgent.toLowerCase().indexOf('chrome') & -1 !== true) {
runpopState();
function runpopState() {
alert("POP STATE");
window.onpopstate = function () {
runpopState();
Until they fix the bug, a solution like this will suffice.
4,628175892
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
The week's top questions and answers
Important community announcements
Questions that need answers
Stack Overflow works best with JavaScript enabledpopstate是HTML5的History系列中的事件，但是这玩意儿在webkit中的行为相当让人蛋疼。
虽然官方的文档中对popstate的描述也没有细节上的描述，不过以我的逻辑来判断，这货是就webkit的BUG。 　 HTML5的这一套HistoryAPI和传统的History不同，或者说这一套HistoryAPI是“session history entries”。虽然官方的文档并没有强调它与传统的History不同，但是在使用上就会发现很大差异。
HTML5中的HistoryAPI是不会使页面跳转的，只是操作地址栏和相应的state属性而已，而且它是手动操作的。浏览器默认的History还是传统的那一套，虽然它们在浏览器上都使用同一个“历史记录堆栈”。 　　 对这个差异的认知就是webkit中诡异行为的原因。webkit并没有把HTML5的History和传统的区分开，而根据官方文档对popstate的描述，只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。
所以在webkit中，无论是刷新还是访问一个新网页都会触发popstate。而其它浏览器中这个popstate仅作用于HTML5的History，并不响应传统的History，更不用说刷新和访问新网页的情况了。
网络上看到的能解决这个问题的貌似也只有一个对popstate延迟绑定的方法，因为popstate会在页面加载完成之后不久触发，所以在 setTimeout一段时间后再绑定事件，popstate的第一次就不会轻易被webkit夺走了←_← 。
不过延迟这种东西我一直都觉得不太靠谱，所以还是果断放弃这种方法了。最后只好使用烂方法，判断浏览器再做调整，直接针对webkit在页面加载完成后第一次触发的popstate屏蔽了。不过毕竟是针对浏览器的东西，虽然目前是可以使用，但是如果以后webkit修复了这个BUG就需要修改代码了
changeHistory: function () {
var self =
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.
var hashSplit = hashLocation.split('#!/');
var hashName = hashSplit[1];
var hash = window.location.
self.showDetentionActivity();
self.doExit();
if (window.history.state != 'only') {
window.history.pushState('only', null, document.URL);
changeHistory: function () {
var self =
if (window.history && window.history.pushState) {
function historyEvent() {
$(window).on('popstate', function () {
var hashLocation = location.
var hashSplit = hashLocation.split('#!/');
var hashName = hashSplit[1];
var hash = window.location.
self.showDetentionActivity();
self.doExit();
setTimeout(historyEvent, 2000);
if (window.history.state != 'only') {
window.history.pushState('only', null, document.URL);
本文已收录于以下专栏：
相关文章推荐
1、背景：同事去学校做毕设请假，今天帮他修改h5bug
2、遇到的问题：移动端App打开某个网页会自动弹出一个对话框，这个对话框出现的不合时宜，因为需要是在页面做一些操作后点击原生顶部的返回按钮再弹...
把代码写在1页面的点击进入下一级的事件中，点击手机自带的返回就会有效果，（事列：所有页面在一个网页中显示，控制显隐）if (window.history && window.history.pushS...
最近需求需要,需在浏览器(web 和 h5手机端)实现回退弹框
网上很少找到这个需求,找到的也是有bug的,最后解决了,分享一下问题和解决方案
用到的函数:window.history.pushS...
js实现对Android设备物理返回键单击／双击事件处理（Framework7框架）
转载地址：http://www.jb51.net/article/89921.htm
首先我们要了解浏览器的history。
大家知道在页面中我们可以使用javascript window...
上一篇文章中，我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在下面几个问题：
1.使用location.hash会导致地址栏的url发生变化，用户体验...
用ajax，pushState()，popstate实现浏览器前进后退页面局部刷新
AJAX技术对我们前端产生了巨大影响
可以让我们的页面无刷新操作减少网络请求
但是它也产生了一些问题
不能够使用浏览器的前进与后退
（后退是浏览器非常常用的按钮）很久很久以前，Gmail借助i...
1、问题重现
输出结果：
无法执行doNormal
2、解决方法
给addServer加参数
addServer自带默认参数，为什么还需要我手动加参数？...
shell中通过mongo args &的方式启动mongo进程,退出shell重新登进之后发现mongo进程没了,查看日志发现有如下输出:T18:39:58.593+0800 [...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)