小墨の博客

梦想需要付诸行动,否则只能是梦

网页中,不刷新页面修改url

网页中,不刷新页面修改url

//前两个参数可省略
history.pushState('','',newUrl);
history.replaceState('','',newUrl);


相关MDN文档如下

History.pushState()

MDN文档(中文):https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState


History.replaceState()

MDN文档(中文):https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState


History的所有API用法MDN文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/History



以下参考:https://www.cnblogs.com/wuting/p/8946927.html


pushState与replaceState

两者都是html5的新特性,支持IE10以上,都有三个参数:

以history.pushState(state,title,url)为例:

(1)state:存储JSON字符串,可以用在popstate事件中。

(2)title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替。

(3)url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

两者的区别:

pushState()是在history栈中新建一个历史记录,而replaceState()是替换当前记录;


popState

(1) popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。

(2) 调用history.pushState()或history.replaceState()不会触发popstate事件。当浏览器做出动作时,才会触发该事件,如用户点击浏览器的回退按钮或者在Javascript代码中调用history.back();

window.onpopstate = function(e){

  console.log(e);

}

或者 window.addEventListener('popstate',function(e){

  console.log(e);

},false);

ajax请求后,浏览器点回退按钮是无法回退到ajax请求前的状态的,如果用pushState新增一个history记录,再用popstate进行页面回退,需要注意利用js控制点击事件(即非用户手动点击)时,需要判断是popstate导致的click事件还是用户手动点击的click事件,避免回退按钮需要点击多次才回退成功;(这里记忆尤新啊!!)


张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:512
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:235404

    | | |
    | |  Z-Blog PHP