Question

我们目前有一个app（sails / node js），其中显示了一组动态生成的项目。用户可以选择生成更多动态项目（使用按钮）或预览一个项目（新页面）。目前，更多项目按钮被实现为实现发布请求的jquery附加组件。

问题是，当用户单击更多项目按钮并选择一个项目进行预览，然后按下浏览器后退按钮时，动态内容将丢失。

我们看到不同的选择： 1.实现分页和无限滚动，并使用历史记录js来管理后退按钮 2.使用当前设置的历史记录并与jquery结合使用以管理后退按钮。

还有其他方法吗？任何帮助赞赏。我们对这个开发环境完全陌生。

Answer 1

您可以使用History API：

var stateObj = { lastItemId: 456 }; // or { page: 3 }
history.pushState(stateObj, "page 2", "bar.html");

Answer 2

我找到的最简单的方法是＆＃34;禁用＆＃34;后退按钮点击。好的，从技术上讲，无法禁用它，但您可以为最终用户提供后退按钮已被禁用的外观。我最初基于this blog post开发了我的代码。这是一个很好的阅读，因为他详细解释了这种方法。从那以后，我详细说明了他的代码。

所以我这样定义preventBackButton ()。

function preventBackButton () {
    // Triggered when the back button is pressed, it will detect if the url hash changes from #rms to #no-back.  If it does, then
    // it harmlessly changes the url hash forward again by going from "#no-back" to "#rms".

    // On initial page load, pushes states "#no-back" and "#rms" onto the history, making it the most recent "page" to detect future "back" button presses.
    var history_api = typeof history.pushState !== 'undefined';

    if ( history_api ) {
        history.pushState(null, '', '#no-back');
        history.pushState(null, '', '#rms');
    } else {
        location.hash = '#no-back';
        location.hash = '#rms';
    }

    // This function creates an event handler on hash changes.  This is coded to detect back button clicks.
    window.onhashchange = function() {
        // location.hash becomes "#no-back" when the user clicks back button
        if ( location.hash === '#no-back' ) {
            if ( history_api ) {
                history.pushState(null, '', '#rms');
            } else {
                location.hash = '#rms';
            }
        } 
    };

} // function preventBackButton ()

然后我在$(document).ready()

中调用它

$(document).ready(function() {

    preventBackButton();
    // Do other stuff...

});

处理动态内容的浏览器后退按钮的最佳方法是什么？

2 个答案: