javascript - 移动 'back' 按下后运行 javascript

Question

我们有一个移动网站(MVC 风格的 ASP.NET)，其中包括显示全屏 HTML 幻灯片。

为了显示它，我们像这样在 mobileHTMLMovie View 上运行代码:

$( function() {
    $(document).bind('pageinit', function() {
    $("header").hide();
    $(".subHeader").hide();
    $(".subHeaderAccent").hide();
    $("footer").hide();
    $(".ui-content").css("width", "100%").css("height", "100%").css("margin","0").css("background-color", "#000");
    });
});

我们看到的问题是，当用户按下“后退”按钮时(她/他仅限于硬件控件，因为这段代码禁用了所有包装元素，包括我们的 HTML 移动按钮)元素保持隐藏状态。

我一直无法找到一种方法来在他们登陆的页面上运行“反转”代码(显示而不是隐藏，从“.ui-content”中删除样式属性)。他们登陆的页面在他们到达时没有运行 document.ready，电影页面没有运行“onunload”或“onbeforeunload”，以及我在网上找到的另一个建议(.live('click')在'[data-rel=back]' 元素)也没有用。

有人有什么建议吗？

Answer 1

您可以尝试使用 History 对象并绑定(bind)到 popstate 事件吗？基本上，当显示幻灯片时，您会插入一个新状态，然后当用户按下返回时，它可能会触发弹出。

示例:

$(function() {
    $(document).bind('pageinit', function() {
        $("header").hide();
        $(".subHeader").hide();
        $(".subHeaderAccent").hide();
        $("footer").hide();
        $(".ui-content").css("width", "100%").css("height", "100%").css("margin","0").css("background-color", "#000");

        window.history.replaceState("slideshow", "Slideshow", "slideshow");
    });

    window.addEventListener('onpopstate', function(event) {
        if (event.state === "slideshow") {
            //Close the slideshow
        }
    }
});

我不确定页面的流程是什么，但您可以使用 replaceState 或 pushState，具体取决于幻灯片的启动方式

资源

• https://developer.mozilla.org/en-US/docs/DOM/window.history
• https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history