原文：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. eclipse中搜狗输入法中文状态下输出的全是英文

    在eclipse中搜狗输入法变成了如图这样 在中文状态下,提示的全是中文. 查询到的解决方案: 快捷键ctrl+shift+E关闭搜狗智能英文.然而与eclipse中 Ctrl+shift+E 快捷键 ...

  2. 关于web前端代码艺术

    以前一直都以为html代码要分离得很好,html一个文件,css一个文件,js一个文件,然后最好一个html页面里面不要要太多冗余的代码,不要恶心地引入一个又一个的js,连jquery的引入我都觉得有 ...

  3. Java EE开发环境——MyEclipse2017破解 和 Tomcat服务器配置

    Java EE开发,我们可以搭建如下开发环境: 底层运行环境:jdk 和 jre. Web服务器:Tomcat 后台数据库:SQL Server 可视化集成开发环境:MyEclipse Java EE ...

  4. 五年.net程序员转型Java之路

    大学毕业后笔者进入一家外企,做企业CRM系统开发,那时候开发效率最高的高级程序语言,毫无疑问是C#.恰逢公司也在扩张,招聘了不少.net程序员,笔者作为应届生,也乐呵呵的加入到.net程序员行列中. ...

  5. win10 uwp 获得缩略图

    有时候需要获得文件或视频的缩略图. 本文提供两个方法,用于获得文件的缩略图和截取视频指定时间的显示图片. 文件缩略图 如果有一个文件需要获得缩略图,可以使用 GetThumbnailAsync 或 G ...

  6. win10 UWP 蜘蛛网效果

    我看见了知乎首页登录背景和普通的地球人写的博客,发现了个好看的效果. 那么我来告诉大家如何做这个效果. 第一步是在 Canvas 画点,第二步是让点移动,第三步是画线 在 Canvas 画一个点 我们 ...

  7. 【深度学习系列】PaddlePaddle之手写数字识别

    上周在搜索关于深度学习分布式运行方式的资料时,无意间搜到了paddlepaddle,发现这个框架的分布式训练方案做的还挺不错的,想跟大家分享一下.不过呢,这块内容太复杂了,所以就简单的介绍一下padd ...

  8. 如何才能通俗易懂的解释javascript里面的"闭包"？

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...

  9. javascript 之数据类型

    写在前面 国庆整理资料时,发现刚开始入门前端时学习JS 的资料,打算以一个基础入门博客记录下来,有不写不对的多多指教: 先推荐些书籍给需要的童鞋 <JavaScript 高级程序设计.pdf&g ...

  10. Fork/Join-Java并行计算框架

    Java在JDK7之后加入了并行计算的框架Fork/Join,可以解决我们系统中大数据计算的性能问题.Fork/Join采用的是分治法,Fork是将一个大任务拆分成若干个子任务,子任务分别去计算,而J ...