原文：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. windows下实现linux的远程访问以及linux上文件的上传和下载

    在网络性能.安全性.可管理性上,Linux有着其他系统无法比拟的强大优势,而服务器对这些方面要求特别高,因此Linux常常被用来做服务器使用.而当我们需要维护linux服务器的时候,就需要远程访问li ...

  2. Web API 路由 [二] Attribute Routing

    1) 启用.在App_Start - WebApiConfig.cs下 //在Register函数添加如下代码: config.MapHttpAttributeRoutes(); 2) 使用.Cont ...

  3. 【转】Windows自动连接、断开无线网络

    前提是先连接到指定的WiFi网络上. 然后通过 netsh wlan export profile 将网络配置文件导出,然后使用如下命令添加配置文件到指定的网络接口上,再执行连接命令即可. netsh ...

  4. 消息队列、OSS常用操作封装

    public class MessageQueue { #region Private Properties private const string _accessKeyId = "&qu ...

  5. MVVM 模版里的控件怎样触发命令

    public class BaseWindow : Window { public BaseWindow() { InitializeStyle(); //给样式的控件加载事件 this.Loaded ...

  6. IBatis.Net 老技术新研究

    我们现在用的数据访问组件封装了IBatis.Net框架,提供了标准的数据访问接口和服务.正好总结一下老技术IBatis.Net在进行实际的数据访问开发之前,我们先了解一下:IBatis.Net中几个重 ...

  7. 学习笔记之09小练习题（js:从小到大输出三个任意数，查成绩，相亲题，查体重，一元二次方程求根）

    <script type="text/javascript"> /*第一题.输入三个整数,x,y,z,最终以从小到大的方式输出. 注意小点:1 字符串的拼接是用+,数学 ...

  8. akka tips

    1.actorSelection,当涉及actor远程通信时,可以使用actorSelection. context.actorSelection("akka.tcp://app@other ...

  9. 改变oracle数据库归档模式_译文

    Changing the Database Archiving Mode 改变数据库归档模式. Purpose 目的 This module describes how you can change ...

  10. Iframe父子窗口之间的跨域事件调用和传值

    实现方案1:location.hash传值 父页面:parent.html(所在域:www.parent.com) 子页面:child.html(所在域:www.child.com) 要实现父子页面双 ...