pushState/popstate 的奇怪问题 - 初始页面似乎 "pushed" 两次

Question

pushState/popstate 我遇到了一个奇怪的问题，我的初始页面似乎被保存了两次。

不举例说明有点难

像这样：

当前页面是 www.bing.com
copy/paste 我的 URL 进入 URL 栏和页面加载
单击页面上的 link（此 link 触发 AJAX 请求，然后操作 DOM 以显示检索到的数据。）
按后退按钮将我带到与步骤 2 相同的页面
再次按后退按钮，但我仍然在与 step2/4
再次按后退按钮，我会回到 www.bing.com

如您所见，我需要按两次后退按钮才能回到 www.bing.com，而它应该只需要 1.

我的页面的简短说明（代码在页面底部）：

当页面加载时，下拉列表 selection 的初始列表通过 AJAX 检索并填充 select 标签。
用户可以选择单击 3 link 来确定下拉菜单的内容 selection。示例：如果我单击选项 B link，这将触发与步骤 1 相同的 AJAX，但仅检索适合选项 B 的数据。
用户从下拉列表中输入 selection 并按搜索。这会触发另一个 AJAX 函数，该函数检索相关数据并在 mysearchresults div.
我试过 pushState 的放置（例如 AJAX 调用之前或之后），现在看来这个放置给我带来的问题最少。虽然我确实遇到了我上面提到的问题。

这是我的代码。我不得不去掉很多 code/functions 以使其简短易读，但请放心 AJAX calls/data 显示正常。

<div id="content">
    <p>
        <a class="coursetype" href="#" data-type="B">Option B</a>
        | <a class="coursetype" href="#" data-type="H">Option H</a>
        | <a class="coursetype" href="#" data-type="BG">Option BG</a>
    </p>

    <form id="myform">
        <label class="formlabel" for="course">Select your course</label>
        <br /><select id="course" name="course"></select>
        <button id="searchbutton" type="button">Search Me</button>
    </form>

    <div id="mysearchresults"></div>
</div>

$(document).ready(function() {
    var onClickCourseTypeHandler = function(event) {
        event.preventDefault();

        getCourses({ type:$(event.target).data("type") });

        window.history.pushState({ html:$("#content").html(), coursecode:$("#coursecode").val() }, "", main?type="+pagevars.type);
    }

    var onClicksearchbuttonHandler = function(event) {
        if ($("#coursecode").val().length > 0) {
            searchDB({ course:$("#course").val() });

            window.history.pushState({ html:$("#content").html(), coursecode:$("#coursecode").val() }, "", "/main?&course="+$("#course").val());
        }
    };

    $(document).on("click", ".coursetype", onClickCourseTypeHandler);

    $(document).on("click", "#searchbutton", onClicksearchbuttonHandler);

    try {
        window.addEventListener("popstate", function(event) {
            if (event.state) {
                $("#content").html(event.state.html);

                if (event.state.coursecode.length > 0) {
                    if ($("#course option[value='" + event.state.course + "']").length > 0) {
                        $("#course").val(event.state.course);
                    } else {
                        $("#course option:first-child").attr("selected", "selected");
                    }
                }
            }
        });
    } catch(exception) {
    }

    onLoad();

    function onLoad() {
        getCourses({ type:"" });

        window.history.pushState({ html:$("#content").html(), course:dbvars.course }, "", "/main");
    }

    function searchDB(parameters) {
        $.ajax({
            url: baseurl+"/searchDB"
            , cache: false
            , dataType: "json"
            , data: { format:"json", course:parameters.course }
            , success: function(data, status) {
                parameters.data = data;
                displaySearchResults(parameters);
            }
        });
    }

    function getCourses(parameters) {
        if (typeof(parameters.cacheflag) === "undefined") { parameters.cacheflag = false; };

        $.ajax({
            url: baseurl+"/getCourses"
            , cache: parameters.cacheflag
            , dataType: "json"
            , data: { format:"json", coursetype:parameters.type }
            , success: function(data, status) {
                parameters.data = data;
                populateCourses(parameters);
            }
        });
    }
});

Answer 1

在页面加载时将对象文字传递给 pushState()。这样你就可以随时回到你第一次创建的 pushState。

添加到DOM就绪

var obj = { html: '', coursecode: '' };

try {
    window.history.pushState({
        html: $("#content").html(),
        coursecode: $("#coursecode").val()
    }, 'just content or variable', window.location.href);
} catch (e) {
    console.log(e);
}

在你的事件处理程序中推送状态：

var onClicksearchbuttonHandler = function(event) {
    if ($("#coursecode").val().length > 0) {
        searchDB({ course:$("#course").val() });

        obj.html = $("#content").html();
        obj.coursecode = $("#coursecode").val();
        window.history.pushState(obj, "", "/main?&course="+$("#course").val());
    }
};

回到你原来的推送状态时：

$(window).on('popstate', function (ev) {
    var originalState = ev.originalEvent.state || obj.html;
    if (!originalState) {
        // no history
        // do something
        return;
    } else {
        // do something
    }
});

Answer 2

我注意到您在 href 中使用了哈希 (#)。尝试将 hrefs 中的哈希 (#) 更改为 Javascript:void(0).


    Javascript:void(0);

href 中的哈希 (#) 将影响您的 pushState/popState。

Answer 3

当您加载您的页面时，它会被添加到历史记录中，所以当您这样做时 history.pushState 它会被第二次添加。尝试在 onload 函数中将 history.pushState 替换为 history.replaceState。

Answer 4

我发现这对单页应用程序非常有效

我决定使用这个方便的小功能，它允许将一个项目推入历史记录，如果它是空的或者只有当它没有被按下后退按钮召回时

（消除重复项，因此您不必按两次后退按钮）

function historyPush(siteLocation){
    if (!history.state || history.state.sitelocation != siteLocation){
      var stateObj = { sitelocation: siteLocation };
      history.pushState(stateObj, (siteLocation + " page"), ("index.html"));
    }
}

使用：historyPush("Page1")

然后我在 popstate 侦听器函数中使用 switch case 将内容加载回页面：

window.addEventListener('popstate', function(e) {
        console.log(e.state.sitelocation);
        if (e.state.sitelocation){
            switch (e.state.sitelocation){
                case "Page1":
                    pageOne.loadContent();
                    break;
                case "Page2":
                    pageTwo.loadContent();
                    break;
                default:
                    console.log('Unknown Page');

            }
        }
});

它并不适合所有情况，例如，如果您的网站有 300 种不同的情况，您可能希望使用 popstate 侦听器进行另一条路线。但是对于小型站点，它可以很好地完成工作。

pushState/popstate 的奇怪问题 - 初始页面似乎 "pushed" 两次

weird issue with pushState/popstate - initial page seems to have been "pushed" twice

javascript

pushstate