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并实现路由器。