Question

我有这段代码：

<script src="jquery.js"></script>
<script>
$(function(){
    $('.showcontainer').click(function(){
        $('.container').fadeIn();
        window.history.pushState('','','/test');
    });

    $('.container').click(function(){
        $(this).fadeOut();
        window.history.back();
    });

    window.onpopstate = function(e) {
        $('.container').fadeOut();
    };
});
</script>

<input type="button" class="showcontainer" value="button">
<div class="container" style="display:none;width:500px;height:500px;background:red"></div>

编辑：

当我点击showcontainer按钮时，它会显示一个容器框，并且网址会更改为＆＃39; / test＆＃39;。当我点击容器盒或浏览器后退按钮时，容器盒隐藏并且＆＃39; / test＆＃39;从网址中删除。

当我点击浏览器前进按钮时，它只会更改网址并且不会显示容器框。

我希望将网址更改为＆＃39; / test＆＃39;和单击浏览器前进按钮时出现的容器框。我不知道怎么做。

Answer 1

如果您希望在页面前后转发历史记录时运行事件，您希望传递对象状态并设置条件，如下所示：

$(function() {
    var stateObj = {
        page1: true,
        page2: false
    };
    window.history.pushState(stateObj, '', '');

    $('.showcontainer').click(function() {
        $('.container').fadeIn();
        stateObj.page1 = false;
        stateObj.page2 = true;
        window.history.pushState(stateObj, '', '/test');
    });

    $('.container').click(function() {
        window.history.back();
    });

    window.onpopstate = function(e) {
        var state = e.state;
        if (state.page1) {
            state.page1 = true;
            state.page2 = false;
            window.history.replaceState(state, '', '');
            $('.container').fadeOut();
        }
        if (state.page2) {
            state.page1 = false;
            state.page2 = true;
            window.history.replaceState(state, '', '');
            $('.container').fadeIn();
        }
    };
})

单击浏览器前进按钮后如何操作

1 个答案: