jQuery歷史記錄pushstate和重新加載問題

Question

我正在使用html5s歷史記錄。 按下狀態以在單個頁面應用程序中使用瀏覽器的后退按鈕（我正在使用cordova）。 因此，我試圖在div容器中動態加載內容。

根據此示例，我有一個歷史記錄堆棧：

https://zinoui.c​​om/demo/pushstate/

（在下面的評論中，有人遇到相同的問題： -https : //zinoui.c​​om/blog/single-page-apps-html5-pushstate ）

我的html內容是單獨的html文件。

一切正常，直到我按f5鍵或瀏覽器重新加載/刷新按鈕。 在頁面重新加載時，我得到一個404，因為瀏覽器嘗試將其稱為假URL，但實際上並沒有退出。 似乎瀏覽器希望將子頁面加載到自身而不是index.html中。 在上面的示例中，作者在html文件中沒有動態加載的內容。 他從某處收到html代碼作為響應，但我不確定他是如何做到的。

因此，我想重新加載我的頁面並使單獨頁面中的內容仍位於index.html中的指定區域中

這是我的代碼：Index.js：

   $(function () {

            var load = function (url) {
                $.get(url).done(function (data) {
                    $("#content").html(data);
                })
            };


            $(document).on('click', 'a', function (e) {

                    e.preventDefault();
                    console.log(history);
                    var $this = $(this),
                        url = $this.attr("id"),
                        title = $this.text();


                    history.pushState({
                        url: url,
                        title: title
                    }, title, url);

                    document.title = title;

                        //here you can see the folder structure
                        load("/pages/" + url + "/" + url + ".html");



                });


            $(window).on('popstate', function (e) {

                var state = e.originalEvent.state;
                if (state !== null) {
                    document.title = state.title;
                    load(state.url);

                }
                else {
                    document.title = 'example title';

                }
            });


        });

index.html的：

...

 <div id="content">

</div>

....

來自另一個html文件的鏈接（主菜單也從index.html加載到content-div中）

  <li><a id="sp_termine">&Uuml;bersicht der Termine</a></li>
  <li><a id="sp_termine_aendern">Termin &auml;ndern</a></li>

我真的很期待得到幫助！
謝謝<3

Answer 1

1.解決方案：

不要將網址偽造到不存在的位置。 它的風格簡直不好。 使用查詢（？）或＃：

index.html#mycoolsubsite
index.html?mycoolsubsite

只需做：

window.location="#mycoolsubsite";

如果頁面被重新加載，您可能要檢查URL是否指向子站點：

alert(window.location.split("#")[1] || "main"); //will print "main" or if you 'redirected' "mycoolsubsite"

2.解決方案：

學習php或nodejs並實現路由器。