在移动“返回”按下后运行 javascript答案

【问题标题】：Run javascript after mobile 'back' press在移动“返回”按下后运行 javascript
【发布时间】：2012-12-26 16:10:20
【问题描述】：

我们有一个移动网站（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('click') '[data-rel=back]' 元素）也没有工作。

有人有什么建议吗？

【问题讨论】：

@mplungjan：几乎没有——我总是可以设置一个定时事件来不断检查它们是否可见，如果不可见则重新打开它们。它只是粗俗和丑陋 - 我宁愿在它们着陆时可靠地发射它。
你能把节目加到页尾吗？
你可以给页面添加一个过期时间（这样它就不会缓存），这样当他们导航回来时，它会从服务器获取一个新页面？

标签： javascript jquery asp.net-mvc mobile

【解决方案1】：

您可以尝试使用 History 对象并绑定到 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，具体取决于幻灯片的启动方式

资源

【讨论】：