原文：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. 强大的桌面用 PDF 重排工具：K2pdfopt 简明教程

    用 Kindle 阅读 PDF 一直以来都遭到小伙伴们的无限吐槽,在那 Kindle 还能越狱的时代,我们有 Koreader 之类优秀的 Kindle 第三方插件实现 PDF 文档的实时重排,但是随 ...

  2. Java Byte取值范围

    Java Byte 的取值范围大家都知道(-128 ~ 127),那么-128 和 127 这两个数是怎么计算的呢? #大学知识回顾: 概念:负数的补码是该 数 绝 对 值 的 原 码 按 位 取 反 ...

  3. Flash与 Javascript 交互

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

  4. Python实战之dict简单练习

    ['__class__', '__contains__', '__delattr__', '__delitem__', '__dir__', '__doc__', '__eq__', '__forma ...

  5. 使用DapperSimpleCRUD对Repository层进行封装

    通过前面的两篇文章使用Dapper操作Mysql数据库与使用Dapper进行参数化查询,大致介绍了Dapper的一些基本操作和简单使用,在实际的使用当中,我们可以把项目简单的分为MVC+Service ...

  6. 初识Hibernate之关联映射（二）

    上篇我们介绍了关联映射的几种形式,有单向多对一,单向一对多,还有双向一对多.本篇接着介绍有关关联映射的其他几种映射方式,主要有以下几种: 基于外键的单向一对一关联映射 基于主键的单向一对一关联映射 单 ...

  7. zoj 1884 简单 键盘 字符 处理

    WERTYU Time Limit: 2 Seconds      Memory Limit: 65536 KB A common typing error is to place the hands ...

  8. 关于Android SDK Manager无法获取更新列表的正确设置

    1.以"管理员身份运行"SDK Manager. 2.Android SDK Manager"=>"Tools"=>"Optio ...

  9. Elasticsearch分片、副本与路由(shard replica routing)

    本文讲述,如何理解Elasticsearch的分片.副本和路由策略. 1.预备知识 1)分片(shard) Elasticsearch集群允许系统存储的数据量超过单机容量,实现这一目标引入分片策略sh ...

  10. 强大的grep，sed和awk--用案例来讲解

    准备工作: 先简单了解grep,sed和awk功能 1) grep 显示匹配特定模式的内容 grep -v 'boy' test.txt 过滤掉test.txt文件的boy,显示其余内容 grep ' ...