• html5解决ajax破坏浏览器机制


    pjax是一种基于ajax+history.pushState的新技术,该技术可以无刷新改变页面的内容,并且可以改变页面的URL。pjax是ajax+pushState的封装,同时支持本地存储、动画等多种功能。

    众所周知,Ajax可以实现页面的无刷新操作,但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

    history.pushState(obj, title, url) ;

    表示往页面history末尾新增一个历史项,此时history.length会+1。当执行Ajax操作的时候,用history.pushState(obj, title, url)往浏览器history中塞入一个地址(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

    history.replaceState(obj, title, url) ;

    表示替换当前历史项为新的历史项,此时history.length保持不变。

    window.addEventListener("popstate", function() {
      doSomething();                             
    });

    浏览器的前进与后退,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。

    参考demo

  • 相关阅读:
    php中处理汉字字符串长度:strlen和mb_strlen
    天气应用收获总结
    word文档每章的页眉页脚设置
    python资料汇总
    linux 命令——61 wget(转)
    linux 命令——58 ss(转)
    linux 命令——56 ss(转)
    linux 命令——56 netstat(转)
    linux 命令——55 traceroute(转)
    linux 命令——54 ping(转)
  • 原文地址:https://www.cnblogs.com/camille666/p/js_historyobj_fn_to_solve_ajax_problem.html
Copyright © 2020-2023  润新知