利用HTML5新特性改变浏览器地址后不刷新页面

作为一个程序员，上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源码文件加载类似效果。
```

demo源码下载

posted @ 2013-04-18 17:27 xu.c 阅读(18584) 评论(3) 编辑收藏举报

刷新页面返回顶部

xucheng's blogs

如果要飞的高，就该把地平线忘掉. . . . . . . . .

利用HTML5新特性改变浏览器地址后不刷新页面

公告