pjax 历史管理 jQuery.History.js

更新

http://www.bootcdn.cn/jquery.pjax/

简介

pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。

pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。

点击这里查看pushState的浏览器支持情况

概述

pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素,当您浏览您的网站时将被替换。

// ------------------------------------------------------------------------------------------------

在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。

解决方案如下:

方案一:使用window. Onhashchange 事件

如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面:

解决方案如下:

<ul class="menu">
    <li><a href="/home/index#page=1">page1</a></li>
    <li><a href="/home/index#page=2">page2</a></li>
    <li><a href="/home/index#page=3">page3</a></li>
</ul>

<div id="mainPanel">
</div>

首先写一个方法来获取当前url中指定key的hash值,如下:

<script type="text/javascript">
      //获取指定key的hash值
      function getHash(key, url) {
          var hash;
          if (!!url) {
              hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
              hash = (hash == url) ? "" : hash;
          } else {
              hash = self.location.hash;
          }

          hash = "" + hash;
          hash = hash.replace(/^[?#]/, '');
          hash = "&" + hash;
          var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));
          if (val == null || val.length < 1) {
              return null;
          } else {
              return decodeURIComponent(val[1]);
          }
      }
  </script>

使用onhashchange事件触发ajax请求:

<script type="text/javascript">

到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题:

当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。

所以我们要在上面的代码追加一行:

       function loadPanel() {
        var page = getHash("page");
        if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
        if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
        if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    }
    $(window).bind("hashchange", loadPanel);
 </script>
$(loadPanel);
//或者    
$(function(){ $(window).trigger("hashchange"); });

onhashchange 事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,

目前chrome ,firefox,Opera,  Safari,IE8及以上版本浏览器都兼容。

其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。

方案二:使用jQuery.History.js

对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(http://plugins.jquery.com/history/)。

这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。

如:

<script src="/Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.history.init(function (hash) {
            var page = getHash("page");
            if (page == 1) {
                $("#mainPanel").load("/home/page1");
            }
            if (page == 2) {
                $("#mainPanel").load("/home/page2");
            }
            if (page == 3) {
                $("#mainPanel").load("/home/page3");
            }
        });
    });
</script>

另外,这个插件已经不再继续更新维护了。

方案三:jquery.ba-hashchange.js

jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

这个插件的实现原理和jquery.history.js 完全一样。循环间隔为50毫秒。

它overwrite 了window.hashchange事件,使其能够兼容全部浏览器。

使用如下:

<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).hashchange(function () {
        var page = getHash("page");
        if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
        if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
        if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    });
    $(window).hashchange();
</script>

Ajax保留浏览器历史的解决方案

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美丽应用

滚动截图:更人性化的长截图工具

10210
来自专栏微信小程序开发

微信小程序中的form表单数据如何获取

知晓程序员,专注微信小程序开发的程序员! 前言:微信小程序中,form表单提交是比较常见的,今天来说一下form表单提交时,该如何获取表单项的数据。 知识点:...

88060
来自专栏最肯忘却

控制台VNC登录方式

近期由于腾讯更新了VNC登录方式的位置,隐藏的已经没有以前那么升了,如果您的服务器遭遇了灾难性的问题导致无法远程,您可通过VNC机型登录您的服务器进行紧急修复。

1.6K00
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

1K20
来自专栏木子昭的博客

简单优化前端工程几种方式(上篇)

如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源,...

9730
来自专栏王磊的博客

VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

一、IDE的选择:   VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.   WebStorm缺点:性能方面VsC...

43050
来自专栏jeremy的技术点滴

微信小程序上手

71360
来自专栏前端新视界

关于浏览器后退操作与页面缓存问题

关于浏览器后退缓存的问题很早就注意过,但一直没有在意,直到今天测试确切地提出这个问题。 问题描述 页面上有一个认领按钮,点击之后跳转到详情页,该按钮变为撤销,按...

40980
来自专栏web前端教室

《vue+vant+node+mongoDB+koa2》电商项目实战连载(2)

https://youzan.github.io/vant/#/zh-CN/intro,

16630
来自专栏Rainbond开源「容器云平台」

云帮周更新日志(2017.05.01-2017.05.07)

10630

扫码关注云+社区

领取腾讯云代金券