我正在设计一个 JQuery Mobile 应用程序并面临一个问题，
我有两个页面，page1.aspx 和 page2.aspx，我必须从 page1 重定向到 page2。目前我正在使用 window.location.href 进行重定向，但它也在地址栏中显示加载。
为了避免这种情况，我想使用$.mobile.changePage。
问题:
现在，在重定向之前，我在 localStorage 变量中设置一个值，基于 page2.aspx 加载事件上的该值，我必须绑定(bind)页面。它与 window.location.href 一起工作正常，但是在使用 $.mobile.changePage 时它正在重定向，但加载事件在到达 page2.aspx 后没有触发 如果我刷新正在加载的页面。
所以我的问题是在显示 page2.aspx 时必须触发加载事件。
谁能告诉我为什么在使用$.mobile.changePage时page2.aspx无法加载？
如果有人知道解决办法，请尽快回复，非常紧急。
提前致谢。
Page1.aspx:
localStorage.setItem("pageCode", "NULLException");
//$.mobile.changePage("../MessageDialog.aspx", "slide", true, true);
$.mobile.changePage("../MessageDialog.aspx", { transition: "slide", changeHash: true, reverse: false });
Page2.aspx:
$('div').live("pageshow", function () {
if (localStorage.getItem("pageCode") != null) {
if (localStorage.getItem("pageCode") == "NullException") {
$('#lblDialogHeader').text("Error");
$('#lblDialogMessage').text("Sorry");
document.getElementById("btnOK").setAttribute("onclick", 'Test()');
}
}
}
HTML
<div data-theme="c" data-role="page" id="test">
<div data-role="header" data-theme="b">
<h1><label id="lblStatus">Status</label></h1>
</div>
<div data-role="content" data-theme="b">
<h3><label id="lblDialogHeader"></label></h3>
<p><label id="lblDialogMessage"></label></p>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<a href="#" data-role="button" id="btnOK" data-icon="check">OK</a>
<a href="#" data-role="button" id="btnCancel" data-rel="back" data-icon="delete" >Cancel</a>
</ul>
</div>
</div>
</div>
最佳答案
似乎当您调用 changepage 指定转换时，第二个页面似乎被“注入(inject)”到第一个页面中。您可以轻松检查它，因为 $(document).ready(function(){}) 在第二页中不起作用。
我在 Windows Phone 7 应用程序中使用 Cordova，我将脚本 location.href 更改为使用 $.mobile .changepage() 并且存在这个问题:我希望第二个页面触发任何加载事件，但没有一个起作用(pageshow，pagechange，pagebeforechange、正文onload、$(document).ready等)。
以下是我迄今为止的发现，可能会对您和其他人有所帮助:
index.html是我的起始页面，如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function callSecondPage() {
//save my scroll position in index page
var top = $(window).scrollTop();
window.sessionStorage.setItem('top', top);
//go to the second page
$.mobile.changePage("secondpage.html", { transition: "slide", changeHash: true, reloadPage :true });
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.min.css" />
</head>
<body onload="onLoad()">
<div class="my-page" data-role="page" data-title="My App Title" data-theme="a">
<div class="header" data-role="header">
<img src="img/title.png" />
</div><!-- /header -->
<div data-role="content">
<div class="my-logo">
<img src="img/logo.png"/>
</div>
<div class="my-content">
some stuff here
<a href="#" onclick="callSecondPage()">Call second page</a>
</div>
</div>
</body>
</html>
现在是工作的secondpage.html。了解不可能使用 pagechange 或 $(document).ready，我们注意到我们可以使用 pageinit 来模拟“页面加载”。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
//LOL! this does not work using $.mobile.changepage as caller
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
//LOL! this will never run using $.mobile.changepage as caller
// Now safe to use the Cordova API
var top = sessionStorage.getItem('top');
}
</script>
</head>
<body onload="onLoad()">
<div class="my-second-page" data-role="page" data-title="App Title" data-theme="b">
<script type="text/javascript">
$(".my-second-page").live('pageinit', function () {
//LOL! Hey this WORKS! I can see an output in Visual Studio!
console.log('************************* pageinit');
console.log('************************* '+ sessionStorage.getItem('top'));
});
$(".my-second-page").live('pagechange', function () {
//LOL! Again, this is not going to work, well, it does not print an output in Visual Studio!
console.log('************************* pagechange');
console.log('************************* ' + sessionStorage.getItem('top'));
});
</script>
<div data-role="header">
<h1>App title</h1>
</div><!-- /header -->
<div data-role="content">
<div class="my-content">
your stuff here for second page
</div>
<p>
<a href="index.html" data-role="button" data-theme="b" data-transition="flip" rel="external" data-icon="back" data-iconpos="left" data-inline="true">Back</a>
</p>
</div>
<div data-role="footer" class="ui-footer" data-position="fixed">
<h1>My footer</h1>
</div>
</div>
</body>
</html>
这是一个真实的工作示例，如果有人需要我可以分享一个示例项目。
关于JQuery Mobile 更改页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8153236/