移动设备点击“返回”后执行JavaScript

Question

移动设备点击“返回”后执行JavaScript

6

我们有一个移动站点（使用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”中删除style属性”）。当他们到达目的地时，他们所在的页面不会运行document.ready，电影页面也不会运行“onunload”或“onbeforeunload”，我在网上找到的另一个建议（在“[data-rel=back]”元素上使用“.live('click')”）也没有起作用。

请问有人有什么建议吗？

- Jeff

@mplungjan: 很少这样做-我总是可以设置定时事件来不断检查它们是否可见，如果它们不可见就切换它们回来。这只是一个笨拙而丑陋的方法-我宁愿让它们可靠地落地时触发。 - Jeff

你能把展示添加到页面末尾吗？ - mplungjan

你能否给页面添加过期时间（使其不缓存），这样当用户返回时就会从服务器获取到新的页面呢？ - MarkG

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Burgess · Accepted Answer

你可以尝试使用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

资源