我们有一个移动网站(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]' 元素)也没有用。
有人有什么建议吗?
最佳答案
您可以尝试使用 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
,具体取决于幻灯片的启动方式
资源
关于javascript - 移动 'back' 按下后运行 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14043096/