利用HTML5新特性改變瀏覽器地址後不刷新頁面

時間 2019-11-21

標籤利用 html5 html 特性改變瀏覽器地址刷新頁面欄目 HTML5 简体版

原文原文鏈接

原文：http://www.cnblogs.com/xuchengzone/archive/2013/04/18/html5-history-pushstate.htmljavascript

做爲一個程序員，上GitHub必然是很常常的一件事情。細心的同窗會發現當咱們在瀏覽項目源碼的時候，進入文件夾後Url地址發生改變後，內容很快就加載好了。起初還覺得是刷新了頁面加載的，但刷新頁面速度也快的離譜了吧。因而F12監控下網絡請求，發現是進行了Ajax請求。非常神奇，Url地址發生改變不是會刷新頁面嗎（#號後面的除外啦）？什麼狀況？猜測確定是HTML5這個東東里面的新特性。Google搜索下果真如此，是history.pushState 這個新東西。因而自動動手測試實現起來了。css

實現效果如圖，點擊麪包屑導航下面的內容進行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源碼文件加載相似效果。
```