当前位置: 时代头条 > 正文

如何利用js操作浏览器历史记录

html5提供了操作浏览器历史记录的api,pushState方法和replaceState()方法,前者可以添加历史记录,后者可以修改历史记录。

pushState(state,title,url)方法有三个参数;

第一个参数state是一个对象,可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

第二个参数title可以忽略,直接传空就行。

第三个参数url是要添加到历史记录的url。

注意的是,执行过这个方法,浏览器的url会变化,同时历史记录会添加,但是页面并不会立即跳转,页面只有在浏览器执行后退或前进操作的时候才会执行刚才添加进去的页面。

另外,有一个事件可以监听浏览器的前进后退,window.onpopstate();

我们可以监听这个事件来达到跳转页面功能。

下面是一个window.open打开的页面可以回退到想要的页面的示例:

1.html

如何利用js操作浏览器历史记录2.html

如何利用js操作浏览器历史记录

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

最新文章