我正在尝试为基于 jQuery Mobile 和 ASP.Net MVC 的网站做一个闪屏。我的问题是我不能真正改变导航结构,因为所有的控制器都用在桌面版的网站上。站点的移动端只有单独的 *.Mobile.cshtml 视图,并且必须遵循与桌面站点相同的导航约定。
我要做的是在“主页”页面中创建一个像这样的 jQuery 移动“页面”:
@if (ViewBag.ShowSplash!= null && ViewBag.ShowSplash == true)
{
<div data-role="page" data-theme="a" id="splash">
<div id="splash_container">
<img src="@Url.Content("~/Content/images/splash_logo.png")" />
</div>
</div>
<script>
// once we display splash screen, give it 4 seconds and load main container
$(document).on('pageinit', '#splash', function () {
var hideSplash = function () {
$.mobile.changePage($("#container"));
};
setTimeout(hideSplash, 4000);
});
</script>
}
在ViewBag.ShowSplash
控制器中设置的位置,检查是否在第一次加载时设置了 cookie。我面临的问题是,每当我回到主屏幕时,启动画面就会不断出现,即使 cookie 已设置并且ViewBag.ShowSplash
在控制器中为空。我猜 JQM 正在缓存所有页面并且#splash
无限期地卡在那里。
要修复 JQM 缓存,我将#splash
像这样删除容器:
// Once main container is loaded, remove splash page-container so we can't come back to that thing again. Ever.
$(document).on('pageshow', '#container', function () {
$('#splash').remove();
});
这有点适用于飞溅,但会破坏其他东西,比如导航。
我想知道是否有更简单的方法在 JQM 中进行启动屏幕,如果没有,有没有办法告诉 JQM 永远不要回到某个页面?