原文：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. 数据库服务器构建和部署列表(For SQL Server 2012)

    前言 我们可能经常安装和部署数据库服务器,但是可能突然忘记了某个设置,为后来的运维造成隐患.下面是国外大牛整理的的检查列表. 其实也包含了很多我们平时数据库配置的最佳实践.比如TEMPDB 文件的个数 ...

  2. QCW切割 --铁片

    1.QCW切割旋转轴限位部件  --刘锦峰协助        :铁片              功率85%   最大功率100  最小功率50  脉宽0.1ms  调整焦点-0.5左右

  3. Eddy's爱好 hdu2204

    Eddy's爱好 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. 705. New Distinct Substrings spoj（后缀数组求所有不同子串）

    705. New Distinct Substrings Problem code: SUBST1 Given a string, we need to find the total number o ...

  5. M-移动端的webapp页面布局教程和webapp实战分析

    http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...

  6. zoj3204 connect them 最小生成树 暴力

    Connect them Time Limit: 1 Second      Memory Limit:32768 KB You have n computers numbered from 1 to ...

  7. ServletListener对象学习笔记

    JavaWeb学习笔记--监听器详解 知识概要: 1.监听器下例子举例 2.Servlet规范中的监听器 3. 4. 1. 监听器下例子举例说明: /* Frame:事件源.发生事件的对象 Windo ...

  8. codesmith连接Mysql提示“找不到请求的 .Net Framework Data Provider。可能没有安装。"

    1,首先需要将MySql.Data.dll复制到codesmith安装目录下bin文件夹下,注意dll的版本 2,其次因为codesmith7采用的是.net4.0的配置文件,(64位系统)找到C:\ ...

  9. ionic构建APP--简单操作实现APP制作

    ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...

  10. 通信技术：SSE设计方案（一）--- 前端Server-Sent Events概念讲解和基础类库完善发布

    好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻. 之前几篇博客,研究前端通信技术的第一层ajax技术,从最基 ...