后退按钮事件监听器

Question

我有一个单页应用程序。在第一个实例中，我显示输入页面，输出 Div 隐藏在 time.Later 的那一点，当提交输入数据时，我隐藏输入数据并使用 ajax调用计算输出并在 Output div 中显示输出结果。因此，输入页面和输出页面基本上都存在相同的页面。现在我有一个后退按钮，当用户单击该按钮时，将显示输入 div 并隐藏输出 div。

$("#renderOutput").on("click", "#chngeIcon", function () {
    $('#renderOutput').hide();
    $('#InputPage').show();
});

由于它是单页应用程序，因此如果用户单击浏览器后退按钮，则会转到之前访问过的站点。我想让后退按钮的行为类似于我的后退按钮。请帮助我。enter image description here

Answer 1

您可以尝试 popstate 事件处理程序，例如：

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.



    if ($("#InputPage").is(":visible") == false) {
        // Call Back button programmatically 
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
        $('#renderOutput').show();
        $('#InputPage').hide();
    }

    history.pushState(null, null, window.location.pathname);

}, false);

希望对您有所帮助

后退按钮事件监听器

Back button Event Listener

javascript

jquery

back-button