jQuery Mobile changePage [英] JQuery Mobile changePage
问题描述
我正在设计一个JQuery Mobile应用程序，并且在那里遇到一个问题，
我有两个页面，分别是page1.aspx和page2.aspx，我必须从page1重定向到page2.目前，我正在使用window.location.href进行重定向，但它也在地址栏中显示加载.
I am designing a JQuery Mobile application and facing one problem there,
I have two pages, page1.aspx and page2.aspx, I have to redirect from page1 to page2. Currently I am using window.location.href for redirection, but it is show loading also in address bar.
为了避免这种情况，我想使用$.mobile.changePage.
In order to avoid this I want to use $.mobile.changePage.
问题:
现在，在重定向之前，我正在localStorage变量中设置一个值，基于page2.aspx的加载事件时的该值，我必须绑定页面.它在window.location.href上正常工作，但是在使用$.mobile.changePage时，它正在重定向，但是如果刷新页面正在加载，进入page2.aspx后load事件不会触发.
所以我的问题是显示page2.aspx加载事件时必须触发.
Now before redirection I am setting one value in localStorage variable, based on this value on load event of page2.aspx I have to bind the page. It's working fine with window.location.href, but while using $.mobile.changePage it is redirecting but load event is not firing after coming to page2.aspx if I am refreshing the page it is loading.
So my problem is while displaying page2.aspx load event has to fire.
有人可以告诉我为什么在使用$.mobile.changePage时为什么没有加载page2.aspx吗?
Can anyone tell me why page2.aspx is not loading while using $.mobile.changePage?
如果有人知道解决方案，请尽快答复，这非常紧急.
If anyone knows the solution, please reply ASAP, its very urgent.
谢谢.
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指定过渡时，第二页似乎被注入"到了第一页中.您可以轻松检查它，因为$(document).ready(function(){})在第二页中不起作用.
It seems that when you call changepage specifying a transition, the second page appears to be "injected" into the first one. You can check it easily because $(document).ready(function(){}) does not work in the second page.
我在 Windows Phone 7 应用程序中使用 Cordova ，我将脚本location.href更改为使用$.mobile.changepage()，这是一个问题:我希望第二页触发任何加载事件，但均不起作用(pageshow，pagechange，pagebeforechange，主体onload，$(document).ready等).
I am using Cordova in a Windows Phone 7 application, I changed my script location.href to use $.mobile.changepage() and there was this problem: I wanted that the second page to fire any load event, but none worked (pageshow, pagechange, pagebeforechange, body onload, $(document).ready, etc).
到目前为止，我的发现可能对您和其他人有帮助
Here are my findings so far that might help you and other people:
index.html 是我的起始页面，如下所示
the index.html is my start page as follows
<!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来模拟页面加载".
Now the working secondpage.html. Understanding that is not possible to use pagechange or $(document).ready, we notice we can use pageinit to simulate a "page load".
<!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>
这是一个真实的示例，如果有人需要，我可以共享一个示例项目.
This is a true working sample, if anyone needs I can share a sample project.
这篇关于jQuery Mobile changePage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
