原文：http://www.cnblogs.com/xuchengzone/archive/2013/04/18/html5-history-pushstate.html

 

作为一个程序员，上GitHub必然是很经常的一件事情。细心的同学会发现当我们在浏览项目源码的时候，进入文件夹后Url地址发生改变后，内容很快就加载好了。起初还以为是刷新了页面加载的，但刷新页面速度也快的离谱了吧。于是F12监控下网络请求，发现是进行了Ajax请求。很是神奇，Url地址发生改变不是会刷新页面吗（#号后面的除外啦）？什么情况？猜想肯定是HTML5这个东东里面的新特性。Google搜索下果然如此，是history.pushState 这个新东西。于是自动动手测试实现起来了。

  • 实现效果如图，点击面包屑导航下面的内容进行Ajax加载页面内容。

  • MVC页面代码 ，Ajax 请求只是返回一个内容

    <!DOCTYPE html>
    
<html>
    
<head>
    
    <meta charset="utf-8" />
    
    <meta name="viewport" content="width=device-width" />
    
    <title>@ViewBag.Title</title>
    
    @Styles.Render( "~/Content/css" )
    
    @Scripts.Render( "~/bundles/modernizr" )
    
</head>
    
<body>

    <div>
    
        <a href="/">首页</a> / <a href="/home/news">公司新闻</a>  / <a href="/home/news/1">新品速递</a>
    
    </div>
    
    <br />
    
    <div id="page">
    
        @RenderBody()
    
    </div>
    
    @Scripts.Render( "~/bundles/jquery" )
    
    @RenderSection( "scripts", required: false )

    <script type="text/javascript">
    
        $(function () {
    
            window.onpopstate = function (e) {
    
                //点击浏览器的前进后退按钮处理
    
                if (e.state) {
    
                    document.title = e.state.title;
    
                    $.ajax({
    
                        type: "get",
    
                        url: e.state.url,
    
                        success: function (data) {
    
                            $("#page").html(data)
    
                        },
    
                        error: function (data) {

                        }
    
                    })
    
                }
    
            }

            //处理点浏览器返回时候最后一个不刷新页面内容问题
    
            var state = {
    
                title: document.title,
    
                url: document.location.href,
    
                otherkey: null
    
            };
    
            history.replaceState(state, document.title, document.location.href);

            $("a").click(function () {
    
                var _href = $(this).attr("href");
    
                $.ajax({
    
                    type: "get",
    
                    url: _href,
    
                    success: function (data) {

                        //加入到历史状态里面
    
                        var state = {
    
                            title: data,
    
                            url: _href,
    
                            otherkey: null
    
                        };
    
                        history.pushState(state, data, _href);

                        $("#page").html(data)
    
                    },
    
                    error: function (data) {

                    }
    
                })

                return false;
    
            })
    
        })
    
    </script>
    
</body>
    
</html>
  • 总结：刚查资料看到时候觉得就是调用一个js就可以搞定，但做demo的时候会发现存在一个一个问题，例如：浏览器前进后退时候页面不更新，解决更新后又发现后退到进入的第一个页面时候还是有问题，最后通过 
    history.replaceState 这个去实现的，从而达到了类似github源码文件加载类似效果。

利用HTML5新特性改变浏览器地址后不刷新页面的更多相关文章

  1. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  2. 如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)

    一个非常棒的 JavaScript 框架叫做 Modernizr(http://www.modernizr. com),用于向缺少 HTML5/CSS3特性支持的浏览器打补丁.由 Alexander ...

  3. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  4. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

  5. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  6. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  7. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  8. html5新特性与HTML的区别

    * HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localSt ...

  9. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

随机推荐

  1. 随机算法 poj 2576 Tug of War

    Tug of War Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8187   Accepted: 2204 Descri ...

  2. （转）深度学习word2vec笔记之基础篇

    深度学习word2vec笔记之基础篇 声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...

  3. Hive导出复杂数据到csv文件

    工作中经常遇到使用Hive导出数据到文本文件供数据分析时使用.Hive导出复杂数据到csv等文本文件时,有时会遇到以下几个问题: 导出的数据只有数据没有列名. 导出的数据比较复杂时,如字符串内包含一些 ...

  4. Flash与 Javascript 交互

    网页加载时立即调用 ExternalInterface.addCallback中定义的函数会失败,放到按键中调用正常. 推测:可能是flash对象加载时间略长,网页加载到js时,flash对象尚未初始 ...

  5. Python自学笔记-面向对象相关（Mr seven）

    ---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...

  6. (转载)RESTful架构风格下的4大常见安全问题

    转载自<RESTful架构风格下的4大常见安全问题>,作者:马伟 伴随着RESTful架构风格的大量应用微服务架构的流行,一些本来难以察觉到的安全问题也逐渐开始显现出来.在我经历过的各种采 ...

  7. VS2015智能提示由英文改为中文

    使用 VS2015 时,在 4.0 下智能提示显示中文,在 4.5 下显示英文,对于我这种爱(ying)国(yu)人(tai)士(lan)来说,用起来太不方便了,于 是在 知乎 上找到个好方法如下: ...

  8. [js高手之路] 设计模式系列课程 - jQuery的extend插件机制

    这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...

  9. win10 uwp DataContext

    本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...

  10. jemalloc 快速上手攻略

    引言 - 赠送个 Cygwin (加精) Cygwin 有它存在的合理性. 至少比 wine 好太多了. 它主要功能是在winds上面简易的模拟出linux环境, 比虚拟机 轻量一点点. 坑也不少, ...