Question

我正在使用html5s历史记录。推送状态使用浏览器后退按钮与单页应用程序（我使用cordova）。所以我试图在div容器中动态加载内容。

根据这个例子，我有一个历史堆栈： -

（在下面的评论中有人有同样的问题： - https://zinoui.com/blog/single-page-apps-html5-pushstate）

我的html内容是单独的html文件。

一切正常，直到我按f5或浏览器重新加载/刷新按钮。在页面重新加载我得到一个404，因为浏览器尝试调用假网址，这不会真正退出。好像浏览器想要加载子页面本身而不是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>

我真的很期待得到一些帮助！谢谢＆lt; 3

Answer 1

<强> 1。溶液

不要将网址伪造到非现有位置。它的风格简直糟糕。使用查询（？）或＃：

index.html#mycoolsubsite
index.html?mycoolsubsite

简单地说：

window.location="#mycoolsubsite";

如果重新加载页面，您可能需要检查网址是否指向子网站：

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

<强> 2。溶液

学习php或nodejs并实现路由器。

jQuery历史pushstate和重载问题

1 个答案: