pushstate popstate（html5 pushState使用）
本文目录
- html5 pushState使用
- 为什么微信内置浏览器回退后100%触发popstate事件
- 如何判断popstate是hash改变还是前进后退
- history.pushstate 会刷新页面吗
- js怎么解决popstate多个页面连续返回问题
html5 pushState使用
pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给看的而已,第一个参数是一个对象,可以放入需要的参数,第二个理论上标题名称,但据说无效什么的,第三个就是url.这是地址栏里显示的东西.
popState 是点击浏览器的返回按钮就会触发,如果有push数据,就会在事件中获得state数据,里面就是pushState的第一个参数里的数据.
为了做微信的单页面结构,使用了这些功能,对一些需要特殊操作的链接进行接管,点击这类链接就用pushState插入历史记录,并修改地址栏,然后用ajax获取链接的内容添加到document中去,接着隐藏当前的内容块,显示新获取的内容块.
因为本身ajax获取内容并不会引起历史记录的变化,所以用户本能的点击返回按钮想回退到上一个内容页的时候,会无效,所以这里需要用pushState填入返回需要的数据,并自己在popState里处理对应的隐藏现在的内容块,显示上一个内容块的操作.
为什么微信内置浏览器回退后100%触发popstate事件
需要用户点两次返回。
var bool = true;
pushHistory();
function pushHistory() {
var state = {
title: “title“,
url: “#“
};
window.history.pushState(state, “title“, “#“);
};
window.onload = function() {
setTimeout(function() {
window.addEventListener(’popstate’, function() {
if(bool == true) {
alert()
}
});
}, 0);
};
如何判断popstate是hash改变还是前进后退
html5的popState事件响应的时候，手动调用pushState。应该就可以了。。
我没试过，就讲个思路。
其实就是，每次监听到后退的事件的时候，我在响应事件里头，手动调用一次前进（回到原来页面）。这样就能实现停留在原来页面了。
思路二，依然在popState的响应函数里头，我觉得，应该有某个方法，可以截断事件的默认响应行为。。就是截断（popState接下去的行为，从而让浏览器不后退。）。记得jquery里头貌似有个stopDefault开头的一个函数，忘了。
history.pushstate 会刷新页面吗
HTML5为history对象添加了两个新方法，history.pushState() 和 history.replaceState()，用来在浏览历史中添加和修改记录。所有主流浏览器都支持该方法（包括IE10）。
if (!!(window.history && history.pushState)){
// 支持History API
} else {
// 不支持
}
上面代码可以用来检查，当前浏览器是否支持History API。如果不支持的话，可以考虑使用Polyfill库History.js。
history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
js怎么解决popstate多个页面连续返回问题
在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
一、简单介绍 history 中的操作
1.window.history.back()，后退
2.window.history.forward()，前进
3.window.history.go(num)，前进或后退指定数量历史记录
4.window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。
参数： state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。
title：历史记录的标题。
url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。
5.window.history.replaceState()，修改当前的 history 实体。
6.popstate 事件，history 实体改变时触发的事件。
7.window.history.state，会获得 history 实体中的 state 对象。
二、使用方法
取消默认的返回操作：
1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory(){ var state = {
title: “title“,
url: “#“
}
window.history.pushState(state, “title“, “#“);
}
pushHistory()
2.监听 popstate 事件
window.addEventListener(“popstate“, function(){ //doSomething}, false)
三、注意事项
1.每次返回都会消耗一个 history 实体，若用户选择取消离开，则需要继续 pushState 一个实体
2.pushState 只能一个实体，多个实体返回会出错。使用 window.history.state 查询是否存在添加的实体。
更多文章：
2026年10月11日 08:10
易语言网页api接口怎么调用（易语言，怎么读取网页json的api）
2026年10月11日 08:00
majority of（the majority of 和 a majority of的区别以及用法例句）
2026年10月11日 07:40
2026年10月11日 07:20
2026年10月11日 06:30
2026年10月11日 06:20
2026年10月11日 05:40
another time（another time和other time的区别）
2026年10月11日 05:00
2026年10月11日 04:50
2026年10月11日 03:00
