javascript - jQuery mobile - 关闭历史记录面板

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

这种方法是可行的，只不过url改变了，我无法抓取改变url的事件。此外，它还打乱了 jQuery 移动历史记录模式。

那么人们如何使用 jQuery 移动面板实现这种预期的“类似应用程序”的行为？打开面板 > 历史记录返回 > 关闭面板。就是这样。

非常感谢!

Answer 1

已更新

与其从 jQuery Mobile 的历史记录中检索当前 URL，不如从 hashchange 事件 event.originalEvent.newURL 中检索它，然后将其传递给 popstate 事件将 replaceState() 替换为该 URL。

---

不要监听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;
    }
});

Demo - Code