Question

我有一个从侧面滑入的jQuery移动面板，效果很好。但是，假设您有一个登录页面，该页面会重定向到带有面板的主页面。现在，如果用户打开面板，然后单击后退按钮，他希望面板关闭。但是浏览器会导航回登录页面。

我已尝试在网址中添加内容：

window.location.hash = "panelOpen";

但这只是弄乱了jQuery移动历史状态模式。我还试图收听导航事件，并在面板打开时阻止它：

$(window).on('navigate', function (e, hans) {
     var panels = $('[data-role="panel"].ui-panel-open');
     if (panels&&panels.length>0) {
         e.preventDefault();
         e.stopPropagation();
         $('#' + panels[0].id).panel('close');
           return false;
         }
});

这种工作，除了更改网址，我无法抓住更改网址的事件。此外，它还会混淆jQuery移动历史模式。

那么人们如何通过jQuery移动面板实现这种预期的'app-like'行为;打开面板＆gt;历史回来＆gt;关闭面板。就是这样。

非常感谢！

Answer 1

更新

不是从jQuery Mobile的历史记录中检索当前URL，而是从hashchange事件event.originalEvent.newURL检索它，然后将其传递给popstate事件为replaceState()，这样更安全那个网址。

不要听navigate，而是先听一下之前发出的popstate。这里的诀窍是操纵浏览器的历史记录和jQuery Mobile的历史记录replaceState()和重新加载相同的页面而不用过渡。

var newUrl;
$(window).on("hashchange", function (e) {
    /* retrieve URL */
    newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
    var direction = e.historyState.direction == "back" ? true : false,
        activePanel = $(".ui-panel-open").length > 0 ? true : false,
        url = newUrl,
        title = document.title;
    if (direction && activePanel) {
        $(".ui-panel-open").panel("close");
        $(".ui-header .ui-btn-active").removeClass("ui-btn-active");
        /* reload same page to maintain jQM's history */
        $.mobile.pageContainer.pagecontainer("change", url, {
            allowSamePageTransition: true
        });
        /* replace state to maintain browsers history */
        window.history.replaceState({}, title, url);
        /* prevent navigating into history */
        return false;
    }
});

此部分用于维护之前使用的相同转换，因为重新加载同一页面时transition设置为none。

$(document).on("pagebeforechange", function (e, data) {
    if (data.options && data.options.allowSamePageTransition) {
        data.options.transition = "none";
    } else {
        data.options.transition = $.mobile.defaultPageTransition;
    }
});

Demo - Code

Answer 2

我在聚会上有点迟，但我最近有相同的要求，我想分享我是如何做到的。因此，我将原始问题中的要求扩展为Panels，Popups和Pages：

...一个预期的应用程序＆＃39;行为，历史回来＆gt;关 whaterver是开放的。就是这样。

在.on("panelopen")，.on("popupafteropen")和.on("pagecontainershow")我只需使用HTML5 API（https://developer.mozilla.org/en-US/docs/Web/API/History_API）向窗口历史记录添加另一个条目（我相信没有必要）使用JQM导航浏览器怪癖：）

window.history.pushState({}, window.document.title, window.location.href);

之后，我使用或多或少的Omar函数拦截popstate事件：

$(window).on("popstate", function (e) {
  var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
  var pageOpen = (pageId != "page-home");
  var panelOpen = $(".ui-panel-open").length > 0;
  var popupOpen = $(".ui-popup-active").length > 0;

  if(pageOpen) {
    $.mobile.pageContainer.pagecontainer("change", "#page-home", {reverse: true});
    return false;
  }
  if(panelOpen) {
    $(".ui-panel-open").panel("close");
    return false;
  }
  if(popupOpen) {
    $(".ui-popup-active .ui-popup").popup("close")
    return false;
  }
});

如您所见，主页只是一个级别，但通过使用JQM历史记录实现来获取上一页，可以轻松扩展这一级别：

var activeId = $.mobile.navigate.history.activeIndex;
var jqmHistory = $.mobile.navigate.history.stack; // array of pages

并使用pagecontainer更改为有效条目 - 。

最后一点，通过完全禁用内置JQM Ajax导航系统，这也很有效：

/* Completely disable navigation for mobile app */
$.mobile.ajaxEnabled = false;
$.mobile.loadingMessage = false;
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.popup.prototype.options.history = false;

（在浏览器中测试，在真实的Android和iOS设备上）

jQuery mobile - 关闭历史记录的小组

2 个答案:

更新