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設備上的瀏覽器中測試）