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（'click'） '[data-rel = back]'元素）也没有用。

有人有任何建议吗？

Answer 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，具体取决于幻灯片的启动方式

<强>资源

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

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

移动'后退'按下后运行javascript

1 个答案: