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

Question

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

如果没有例子，有点难以解释。

像这样:

1. 当前页面是 www.bing.com
2. 将我的 URL 复制/粘贴到 URL 栏并加载页面
3. 点击页面上的链接(此链接会触发 AJAX 请求，然后操作 DOM 以显示检索到的数据。)
4. 按后退按钮将我带到与步骤 2 相同的页面
5. 再次按下后退按钮，但我仍然在与步骤 2/4 相同的页面上
6. 再次按后退按钮，我会回到 www.bing.com

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

我的页面的简短说明(代码在页面底部):

1. 当页面加载时，下拉选择的初始列表通过 AJAX 检索并填充选择标记。

2. 用户可以选择点击 3 个链接来确定下拉选择的内容。示例:如果我点击选项 B 链接，这会触发与步骤 1 相同的 AJAX，但只会检索适合选项 B 的数据。

3. 用户从下拉列表中进行选择并按下搜索。这会触发另一个 AJAX 函数，该函数检索相关数据并在 mysearchresults div 中显示格式化信息。

4. 我尝试调整 pushState 的放置位置(例如，在 AJAX 调用之前或之后)，现在看来这个位置给我带来的问题最少。虽然我确实遇到了我上面提到的问题。

这是我的代码。我不得不删除大量代码/函数以使其简短易读，但请确保 AJAX 调用/数据显示正常工作。

<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

当您加载页面时，它会被添加到历史记录中，因此当您执行 history.pushState 时，它会被第二次添加。尝试在 onload 函数中将 history.pushState 替换为 history.replaceState。