zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    Vue-router笔记
    webpack及其配置
    高阶函数+组件化开发
    Es6语法+v-on参数相关+vue虚拟dom
    英语资源及其APP推荐
    Qt获取ip地址
    QT创建和使用动态链接库
    error C2664: “strcmp”: 不能将参数 1 从“WCHAR [260]”转换为“const char *”
    Vue|VUE router 导航重复点击报错的问题解决方案
    Vue|触发路由跳转
  • 原文地址:https://www.cnblogs.com/daishuguang/p/3975693.html
Copyright © 2011-2022 走看看