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

Question

我对pushState/popstate有一个奇怪的问题,我的初始页面似乎保存了两次.

没有例子就很难解释.

这样的事情:

1. 当前页面是www.bing.com
2. 将我的网址复制/粘贴到网址栏和网页加载中
3. 单击页面上的链接(此链接将触发AJAX请求,然后操作DOM以显示检索到的数据.)
4. 按下后退按钮,将我带到与步骤2相同的页面
5. 再按一次按钮,但我仍然和step2/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此操作时,它会再次添加.尝试更换history.pushState与history.replaceState在onload功能.