当用户单击后退或前进按钮时运行 jQuery ajax 函数答案

【问题标题】：Running jQuery ajax function when user clicks the back or forward buttons当用户单击后退或前进按钮时运行 jQuery ajax 函数
【发布时间】：2013-07-01 04:05:54
【问题描述】：

我有以下示例，当用户单击导航行时，它会使用 AJAX 加载一些内容，并使用 jquery history.js https://github.com/browserstate/History.js/ 插件更新 url 和标题以执行一些 HTML5 历史记录。

 ajaxNav: function () {

        $('#uiTabs li a, .ajax').live('click', function (e) {

            e.preventDefault();

            $('<div id="uiLoader"></div>').appendTo('body').hide().fadeIn();

            var url = $(this).attr('href');

            var bodyid = $(this).data('body');

            $.ajax({
                url: url,
                timeout: 5000,
                success: function (responseHtml) {

                    isAjaxNav = true;

                    var content = $(responseHtml).find('#ajax-nav-html');

                    $('.uiContent > .uiPadding').html(content.hide().fadeIn('slow'));

                    History.pushState(null, $(responseHtml).filter('title').text(), url);

                    $('body').attr('id', bodyid);
                    $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() });

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (textStatus == 'timeout') {
                        uiModal.errorTimeoutModal(jqXHR, textStatus, errorThrown);
                    } else if (jqXHR.status == "500") {
                        uiModal.error500Modal(jqXHR, textStatus, errorThrown);
                    } else if (jqXHR.status == "404") {
                        uiModal.error404Modal(jqXHR, textStatus, errorThrown);
                    } else {
                        uiModal.errorUnknownModal(jqXHR, textStatus, errorThrown);
                    }

                    $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() });

                }
            });

        });

    },

但是，当用户单击后退或前进按钮时，它会更改 url 和标题（因为插件支持此功能）但内容不会更改！我将如何检测到这一点，以便我可以使用例如$('location').att('pathname'); 读取新的 url，然后再做一些 ajax？

例如：

//IF back button or forward button clicked or relevant function e.g backspace
$(<!-- ? -->).click(function() {

// Get the current url when the back or forward button was clicked
var url = $('location').att('pathname');

$.ajax({
                url: url,
                timeout: 5000,
                success: function (responseHtml) {

                    isAjaxNav = true;

                    var content = $(responseHtml).find('#ajax-nav-html');

                    $('.uiContent > .uiPadding').html(content.hide().fadeIn('slow'));

                    History.pushState(null, $(responseHtml).filter('title').text(), url);

                    $('body').attr('id', bodyid);
                    $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() });

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (textStatus == 'timeout') {
                        uiModal.errorTimeoutModal(jqXHR, textStatus, errorThrown);
                    } else if (jqXHR.status == "500") {
                        uiModal.error500Modal(jqXHR, textStatus, errorThrown);
                    } else if (jqXHR.status == "404") {
                        uiModal.error404Modal(jqXHR, textStatus, errorThrown);
                    } else {
                        uiModal.errorUnknownModal(jqXHR, textStatus, errorThrown);
                    }

                    $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() });

                }
            });
});

【问题讨论】：

你没有表现出努力，但不幸的是，我不能像你对我那样对你投反对票。答案就在 history.js 中。再次阅读它的文档。作者提供了完整的注释版本。
真的吗？您能否在我查看文档时显示链接，但我没有看到任何有关处理此问题的信息...我已经看到了 History.back() 函数，但这不是我需要的！

标签： jquery

【解决方案1】：

您需要附加到window.onpopstate 事件：

$(window).on("popstate", function (evt) { // use bind() for jQuery < 1.7
    /* ... */
});

工作演示：http://jsfiddle.net/AndyE/CZwQB/（使用 DOM 方法而不是 jQuery）

https://developer.mozilla.org/en/DOM/window.onpopstate

【讨论】：

当状态改变时，它怎么知道要改变什么？因为我在页面上有其他 ajax 调用也将被归类为 statechange，因此它会在不需要时调用该函数！并在调用我发布的第一个函数时调用它。所以我们最终会调用 ajax 两次，并且当任何状态发生变化时！
@Cameron：您可以通过在 popstate 事件处理程序中解析当前 URL 来做到这一点，或者您可以在调用 pushState 时推送先前 AJAX 调用返回的数据并在popstate 事件通过访问event.state。
@Cameron：我没有足够的时间来编写 AJAX 示例，但我可以向您保证，这与我刚刚添加到帖子中的示例并没有太大的不同。只要您将 AJAX 数据传递给 pushState()，它的工作方式应该非常相似。
感谢您的示例，但问题是该功能会立即运行，而不仅仅是当用户单击后退或后退按钮时。
@Cameron：你说的是我的例子，还是你的代码？在我的示例中，您可以通过删除代码顶部附近检查 window.location.search 内容的部分来防止这种情况发生。