正文

Ajax保留浏览器历史的两种解决方案（Hash&Pjax）

IP云
IP云V管理员/3 阅读
09/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

总是在github down点东西，github整个界面做的不错，体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果，但是发现这个特效能够导致浏览器地址栏跟随变化，并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~

一、通过锚点Hash实现：

在这方面其实国内很早就有做了，比如淘宝画报，通过的是在地址栏后面加#锚点实现的，浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点，锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。

来做一个小小的demo：

  1. <style type="text/css">
  2. #tab1_header,#tab2_header{
  3. cursor:pointer;
  4. border:1px solid;
  5. width:50px;
  6. }
  7. #tab1,#tab2{
  8. width:90%;
  9. height:200px;
  10. border:1px solid;
  11. }
  12. </style>
  13. <div id="tab_header">
  14. <span id="tab1_header">Tab1</span>
  15. <span id="tab2_header">Tab2</span>
  16. </div>
  17. <div id="tab1">1</div>
  18. <div id="tab2">2</div>

一个很简单的Tab切换如果一般情况下就直接：

  1. $("#tab1_header").click(function() {
  2. $("#tab2").hide();
  3. $("#tab1").show();
  4. });
  5. $("#tab2_header").click(function() {
  6. $("#tab1").hide();
  7. $("#tab2").show();
  8. });

但假如点击到tab2时想通过后退按钮退到tab1时就不行了，假如刷新的话浏览器的行为完全不是出于用户的想法，这样的话，我们可以加入#锚点来模拟新页面，为什么要说模拟呢，假如直接通过js改变window.location浏览器会重新加载页面，但加#就不会重新加载并且能保存在历史中。JS通过window.location.hash来控制URL后面的锚点#。

我们把代码改为这样：

  1. $(function(){
  2. showTab();
  3. $(window).bind('hashchange', function(e){
  4. showTab();
  5. });
  6. $("#tab1_header").click(showTab1);
  7. $("#tab2_header").click(showTab2);
  8. });
  9. function showTab() {
  10. if (window.location.hash == "#tab2"){
  11. showTab2();
  12. } else {
  13. showTab1();
  14. }
  15. }
  16. function showTab1() {
  17. $("#tab2").hide();
  18. $("#tab1").show();
  19. window.location.hash = "#tab1";
  20. };
  21. function showTab2() {
  22. $("#tab1").hide();
  23. $("#tab2").show();
  24. window.location.hash = "#tab2";
  25. };

加上window.location.hash = "#tab1"这一段代码就行了，在点击tab后，地址栏后面就会加上#tab1，点击tab2后就会改成#tab2，当浏览器检测到url变化时就会触发hashchange这一事件，就是用户在点击后退时能够得到的事件就能够通过window.location.hash进行判断并进行ajax操作了，但是haschange这个事件并不是每个浏览器都有的，只有现代高级浏

览器才有，所以在低级的浏览器中需要用轮询来检测URL是否在变化，这个这里就不具体说了。

二、通过HTML5加强型的History对象实现(类Pjax)

可以通过window.history.pushState这个方法无刷新的更新浏览器地址栏，这个方法在更新地址栏的同时将地址压入历史记录堆栈里，而要取出这个栈顶页面则可以用popstate这个事件来捕获~

来模拟一下github的环境，github中每个url是对应一个完整的实际页面的，所以在ajax请求页面时需要异步获取target页面中指定id容器中的内容：

比如有这样两个页面：

index.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  5. <title>index</title>
  6. </head>
  7. <body>
  8. <script>document.write(new Date());</script>
  9. <div id="cn">
  10. <a href="second.html">加载前</a>
  11. </div>
  12. </body>
  13. </html>

second.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  5. <title>second</title>
  6. </head>
  7. <body>
  8. <script>document.write(new Date());</script>
  9. <div id="cn">
  10. <a href="index.html">加载后</a>
  11. </div>
  12. </body>
  13. </html>

假如用同步的http请求打开的话完全是两个页面，两个页面加入很多地方一样的话我们完全可以用这种方法来实现ajax请求变更DOM，我在这里加了<script>document.write(new Date());</script>语句通过它的变化能得知是否取自两个http请求，局

部的ajax请求是不会改变这个时间显示的。

  1. $(function(){
  2. var state = {
  3. title: "index",
  4. url: "index.html"
  5. };
  6. $("#cn").click(function(){
  7. window.history.pushState(state, "index", "second.html");
  8. var $self = $(this);
  9. $.ajax({
  10. url:"second.html",
  11. dataType: "html",
  12. complete: function(jqXHR, status, responseText){
  13. responseText = jqXHR.responseText;
  14. if (jqXHR.isResolved()) {
  15. jqXHR.done(function(r){
  16. responseText = r;
  17. });
  18. $self.html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));
  19. }
  20. }
  21. });
  22. document.title = "second";
  23. return false;
  24. });
  25. $(window).bind('popstate', function(e){
  26. var st = e.state;
  27. //$("#cn").load(st.url + " #cn");
  28. $.ajax({
  29. url:"index.html",
  30. dataType: "html",
  31. complete: function(jqXHR, status, responseText){
  32. responseText = jqXHR.responseText;
  33. if (jqXHR.isResolved()) {
  34. jqXHR.done(function(r){
  35. responseText = r;
  36. });
  37. $("#cn").html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));
  38. }
  39. }
  40. });
  41. document.title = e.state.title;
  42. });
  43. });

上面语句中当#cn元素被点击时将state通过pushState方法压入历史记录栈，并在第三个参数中将浏览器URL框中指向second页面，并通过ajax将second页面异步载入，将相应的部分加入容器中，这样就实现了异步加载并改变地址栏url了，同样用户点击后退时，触发popstate，刚才pushState方法中的第一个参数state便是这里传入的形参e中的state属性，通过var st = e.state取出供开发使用。同时载入index页面中对应内容。时间有限这个js没有进行重构，直接写$.ajax了，其实假如不需要任何特效单纯的异步载入在jQ中可以直接用$("#cn").load(st.url + " #cn");将请求的html对应的#cn放到本页面的#cn容器中，但加入要更加炫的特效的话就要直接操作ajax传回的数据了。

  1. $("#cn").html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));

先创建一个div容器在将经过script过滤过的代码装入这个容器在通过find方法找到里面对应的选择器容器插入本身的页面中，这里可以不用html来填充，可以根据自己的项目需要用slideUp，show什么的特效进行内容显示~~

另外这里要推荐一个jQuery组件叫pjax（https://github.com/defunkt/jquery-pjax），比较牛叉的一个组件，异步的部分load进来另外一个页面对应容器中的内容，实现的机理和我上面的第二种方案一致。pushState + ajax = pjax 感觉这个应用会热起来的。

稍微总结下，两种方案其实对于想IE6或者FF3.6等比较低级的浏览器支持不是很好，前者若要兼容低端浏览器要用轮询来监听浏览器地址栏行为，而后者的话是完全的HTML5应用，对于非HTML5浏览器只能做判断跳转了。

如pjax最后的一段无奈的兼容处理：

  1. $.support.pjax = window.history && window.history.pushState
  2. // Fall back to normalcy for older browsers.
  3. if ( !$.support.pjax ) {
  4. $.pjax = function( options ) {
  5. window.location = $.isFunction(options.url) ? options.url() : options.url
  6. }
  7. $.fn.pjax = function() { return this }
  8. }

Ajax保留浏览器历史的两种解决方案（Hash&Pjax）的更多相关文章

  1. Ajax的get和post两种请求方式区别

    Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...

  2. PHP中实现MySQL嵌套事务的两种解决方案

    PHP中实现MySQL嵌套事务的两种解决方案 一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: Transactions cannot be nested. This is a co ...

  3. javascript文件夹选择框的两种解决方案

    javascript文件夹选择框的两种解决方案 解决方案1:调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它 ...

  4. Android 的保活的两种解决方案

    原文链接:http://blog.csdn.net/pan861190079/article/details/72773549 详细的阐述了 Android 的保活的两种解决方案 —— 由panhao ...

  5. Ajax跨域问题的两种解决方法

    浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...

  6. 转：前端页面a标签嵌套a标签效果的两种解决方案

      这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...

  7. 前端页面a标签嵌套a标签效果的两种解决方案

    这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...

  8. ASP&period;NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  9. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

随机推荐

  1. 【初码干货】【Azure系列】1、再次感受Azure，体验Windows Server 2016并部署BlogEngine&period;NET

    上个月末,在某人的建议下,重新注册了一个1元试用账户(包含1个月期限的1500元订阅),并充值了1000元转为了正式账户,相当于1000元得到了2500的订阅,于是又一次开启了Azure之旅. 在这不 ...

  2. 简单代码在ABAP中实现声音的播放

    这段代码的功能是在SAP里面实现声音的播放,可以用作程序提醒功能,和SAP里面’噹噹噹’那个声音的意思差不多.将来在项目中遇到客户想要SAP ABAP发出一点声音的时候就可以参考一下这个程序. REP ...

  3. &lbrack;翻译&rsqb; java NIO 教程－－－介绍

    原文地址:http://tutorials.jenkov.com/java-nio/index.html Java NIO(new IO)是从java1.4之后的对IO API的另一种选择,即对标准j ...

  4. hdu4932 Miaomiao&&num;39&semi;s Geometry

    这是一道搜索题,我们很容易得到目标值的上下界,然后就只能枚举了. 就是将x轴上的点排序之后从左到右依次考察每个点,每个点要么在线段的左端点,要么在线段的右端点. 点编号从0到n-1,从编号为1的点开始 ...

  5. 【第四篇】说说layer的iframe弹窗给里面的标签赋值的问题

    说到这一篇,真的是颠覆了我的思维. 官方文档,没有介绍这一部分的操作,大致上提了一下. 我的思路是把页面的数据传过去,在iframe弹窗的页面拿到接收到的数据,然后赋值,但是这样就会有个问题, 怎么传 ...

  6. tornado nginx supervisor

    安装:sudo apt-get install python-tornado sudo apt-get install nginx sudo apt-get install supervisor 1. ...

  7. 自己定义GSON类型适配器

    Exception in thread "main" java.lang.RuntimeException: No-args constructor for class java. ...

  8. java数据结构之链表的实现

    这个链表的内部是使用双向链表来表示的,但是并未在主函数中进行使用 /** * 链表 * 2016/4/26 **/ class LinkList{ Node head = new Node(); No ...

  9. R语言︱文件读入、读出一些方法罗列（批量xlsx文件、数据库、文本txt、文件夹）

    笔者寄语:小规模的读取数据的方法较为简单并且多样,但是,批量读取目前看到有以下几种方法:xlsx包.RODBC包.批量转化成csv后读入. R语言中还有一些其他较为普遍的读入,比如代码包,R文件,工作 ...

  10. 非空校验的提示按钮（shiro项目中来的六）

    一:图示 二,js脚本 /** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector ...