jQuery Mobile-历史记录关闭面板

Question

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

我尝试过在网址中添加一些内容：

window.location.hash = "panelOpen";

但这只是弄乱了jQuery移动历史记录状态模式。 我也曾尝试监听Navigation事件，并在面板打开的情况下阻止它：

$(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;
         }
});

这种工作方式，只是更改了URL，但我无法抓住更改URL的事件。 此外，它还弄乱了jQuery移动历史记录模式。

因此，人们如何通过jQuery移动面板实现这种预期的“类似于应用程序”的行为； 打开面板>历史记录后退>关闭面板。 就是这样。

非常感谢！

Answer 1

更新

与其从jQuery Mobile的历史记录中检索当前URL相比，更安全的是从hashchange事件event.originalEvent.newURL检索它，然后将其传递给popstate事件，并使用该URL进行replaceState() 。

---

而不是听navigate ，而是听之前触发的popstate 。 这里的技巧是通过replaceState() 操纵浏览器的历史记录和jQuery Mobile的历史记录，并重新加载同一页面而不进行转换 。

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;
    }
});

演示 - 代码

Answer 2

我参加聚会有点晚了，但是我最近有同样的要求，我想分享一下我的做法。 因此，我将原始问题中的要求扩展到Panels ， Popups和Pages ：

...一种预期的“类似于应用程序”的行为，历史回溯>关闭，无论打开了什么。 就是这样。

在.on("panelopen") .on("popupafteropen")和.on("pagecontainershow")我只是另一项添加到窗口的历史，通过使用HTML5 API（ https://developer.mozilla.org/ zh-CN / 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更改为活动条目-1。

---

最后一点，通过完全禁用内置的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设备上的浏览器中测试）