当前位置:首页 / 网页制作 / html5教程 / pushstate、popstate操作url的方法介绍
pushstate、popstate操作url的方法介绍
芯晴素材特效 分类:html5教程 发布日期:2018-05-11

这次给大家带来pushstate、popstate操作url的方法,pushstate、popstate操作url的注意事项有哪些,下面就是实战案例,一起来看一下。

一、认识window.history

window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。

1、历史记录的前进和后退

在历史记录中后退,可以这么做:

1
window.history.back();

这就像用户点击浏览器的后退按钮一样。

类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:

1
window.history.forward();

2、移动到指定历史记录点

通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。

要后退一页(相当于调用back()):

1
window.history.go(-1);

向前移动一页(相当于调用forward()):

1
window.history.go(1);

类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:

1
window.history.length;

二、修改历史记录点

HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:

1
2
3
4
5
6
// 当前的url为:<a rel="nofollow" href="http://qianduanblog.com/index.html" target="_blank">http://qianduanblog.com/index.html</a>
var json={time:new Date().getTime()};
// @状态对象:记录历史记录点的额外对象,可以为空
// @页面标题:目前所有浏览器都不支持
// @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:

1
2
3
4
5
6
7
8
9
10
// 当前的url为:<a rel="nofollow" href="http://qianduanblog.com/post-1.html" target="_blank">http://qianduanblog.com/post-1.html</a>
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到:<a rel="nofollow" href="http://qianduanblog.com/index.html" target="_blank">http://qianduanblog.com/index.html</a>
    // 获得的json为null
    // 再点击一次前进到:<a rel="nofollow" href="http://qianduanblog.com/post-1.html" target="_blank">http://qianduanblog.com/post-1.html</a>
    // 获得json为{time:1369647895656}
}

值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jq左右透明遮罩图片切换网页下载

2017-03-15   浏览:186

表单效果之输入框随鼠标点击换色

2013-01-03   浏览:8126

一款漂亮的蓝色风格CSS竖向菜单

2013-01-06   浏览:8009

jQuery可自定义高度图片瀑布流网页下载

2017-03-14   浏览:101

jq二维码生成插件

2017-03-19   浏览:146

jq多图图片通栏切换网页下载

2017-03-15   浏览:346

音乐专辑推荐展示JS网页下载

2017-03-12   浏览:217

漂亮的JS滑动门式图片自动切换效果

2013-01-14   浏览:9505

html5酒店预订日期选择手机日历

2017-03-14   浏览:500

jq双重滚动效果

2017-03-19   浏览:337

HTML5手机登录注册表单网页下载

2017-03-14   浏览:345

[酷] 模仿Windows飞行视窗的登陆框

2012-12-31   浏览:8245