在移动设备按下“返回”键后运行javascript

Question

我们有一个移动站点( MVC风格的ASP.NET)，它可以显示全屏的HTML幻灯片。

为了显示它，我们在mobileHTMLMovie视图上运行代码，如下所示：

$( 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‘在'data-rel=back’元素上的点击)也不起作用。

有人有什么建议吗？

Answer 1

您是否可以尝试使用History对象并绑定到popstate事件？基本上，当幻灯片显示时，您将推入一个新的状态，然后当用户按下back时，可能会触发弹出。

示例：

$(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