首页 > 代码库 > 【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析

【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析

    • 新浪微博当你弹出一个视频的时候再点下一页时,原视频还在,而且地址栏的url的页数变了。
      对于这种网上讨论最多的方案有以下几种:

      一、通过锚点Hash实现
      在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的。但不

      是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。

      二、通过HTML5加强型的History对象实现(类Pjax)
      可以通过window.history.pushState这个方法无刷新的更新浏览器地址栏,这个方法在更新地址栏的同时将地址压入历史记录堆栈里,而要

      取出这个栈顶页面则可以用popstate这个事件来捕获。

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


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

      如pjax最后的一段无奈的兼容处理:
      Js代码

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

 

 

http://vaotoo.com/r/8922

【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析