Cordova（PhoneGap）在jQuery Mobile应用程序的每一页上重新初始化 [英] Cordova (PhoneGap) reinitializing on every page of jQuery Mobile app
问题描述
我一直在使用Cordova和jQuery Mobile编写一个简单的四屏Android应用程序。不同的屏幕布置在单个HTML页面内，作为带有data-role =page属性的DIV。我基本上从jQuery Mobile文档中复制了多页样本模板。
http://jquerymobile.com/test/docs/pages/page-anatomy.html
导航之间的页面发生通过固定在每个页面的底部的持续导航栏。
< div data-role =footer data-id =appNavBardata-position =fixed>
< div data-role =navbar>
< ul>
< li>< a href =＃homePagedata-icon =homedata-transition =noneclass =ui-btn-active ui-state-persist> a>< / li>
< li>< a href =＃historyPagedata-icon =griddata-transition =none>历史< / a>< / li>
< li>< a href =＃settingspagedata-icon =geardata-transition =none>设置< / a>< / li&
< li>< a href =＃aboutPagedata-icon =infodata-transition =none>关于< / a>< / li&
< / ul>
< / div>
< / div>
各种Javascript库都包含在HTML页面的头部分，如下所示：application.js包含应用程序的逻辑）。
< head>
< title>已编辑< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =jquery / RedactedTheme.min.css/>
< link rel =stylesheethref =jquery / jquery.mobile.structure-1.1.0.min.css/>
< link rel =stylesheethref =application.css/>
< script type =text / javascriptsrc =jquery / jquery-1.6.4.min.js>< / script>
< script type =text / javascriptsrc =jquery / jquery.mobile-1.1.0.min.js>< / script>
< script type =text / javascriptsrc =flot / jquery.flot.min.js>< / script>
< script type =text / javascriptcharset =utf-8src =cordova-1.7.0.js>< / script>
< script type =text / javascriptcharset =utf-8src =statusbarnotification.js>< / script>
< script type =text / javascriptcharset =utf-8src =application.js>< / script>
< / head>
当Cordova完成加载并准备使用时，会发出deviceready信号。 Cordova文档建议将所有设置代码绑定到绑定到该信号的事件侦听器。我在application.js中这样做：
function onDeviceReady（）{
console.debug初始化）;
setup（）;
}
document.addEventListener（deviceready，onDeviceReady）;
setup（）是一个函数，用于从浏览器中读取Web SQL数据库和存储API定义此处），以便维护用户偏好设置和
现在的问题：我的印象是，jQuery Mobile将使用jQuery ajax方法加载第一页之后的任何后续页面，并且在这样做时，它将剥离头部分并直接跳到具有data-role =page属性和适当ID的DIV。我所观察的是，每当我访问应用程序的新页面时，头部分中的脚本似乎会重新加载。这发生在第一次在会话中访问页面，然后停止发生。
看来Cordova正在重新初始化，并且再次发射装置信号。在Eclipse中使用LogCat，我可以看到我放在onDeviceReady函数中的调试消息。 setup（）函数也被再次调用。这会大大减慢事情。
有人知道我在哪里错了吗？有没有办法确保Cordova只加载一次？
感谢，
Evan
我知道这个问题大约9个月大，但只是为了防止我的解决方案帮助别人的同一个问题
< t构建您的页面，每个HTML显示，而不是构建一个长HTML页面，每个显示部件在其自己的DIV中
data-role =page 现在，当你改变页面时，你可以使用JQM的 $。mobile.changePage（）来更改显示页面
例如您的网页可能如下所示：
< div data-role =pageid =startingPage>
< p onClick =$。mobile.changePage（'page2'）>页面链接< / p>
< / div>
< div data-role =pageid =page2>
< p>更多内容< / p>
< / div>
我知道这对于大多数Web开发来说似乎不太直观，但是使用PhoneGap& JQM表示不在标准网络开发工作
I've been writing a simple four-screen Android application using Cordova and jQuery Mobile. The different screens are arranged inside a single page of HTML as DIVs with the data-role="page" attribute. I basically copied the multi-page sample template from the jQuery Mobile documentation.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Navigation between the pages happens via a persistent navbar stuck to the bottom of each page. Again, I used the code suggested in the jQuery Mobile docs with little modification.
<div data-role="footer" data-id="appNavBar" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#homePage" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist">Home</a></li>
<li><a href="#historyPage" data-icon="grid" data-transition="none">History</a></li>
<li><a href="#settingsPage" data-icon="gear" data-transition="none">Settings</a></li>
<li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li>
</ul>
</div>
</div>
The various Javascript libraries are included in the head section of the HTML page, as follows (application.js contains the logic of the app).
<head>
<title>Redacted</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="application.css" />
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>
When Cordova is finished loading and is ready for use, it emits the "deviceready" signal. the Cordova docs recommend binding all setup code to an event listener tied to that signal. I have done it like this in application.js:
function onDeviceReady() {
console.debug("Cordova initialized.");
setup();
}
document.addEventListener("deviceready", onDeviceReady);
setup() is a function that reads information from the browser Web SQL database and storage (using the Cordova API defined here) in order to maintain user preferences and usage information between application launches.
Now for the problem: I was under the impression that jQuery Mobile would use the jQuery ajax method to load any subsequent pages after the first page, and that in doing so it would strip out the head section and skip straight to the DIV with the data-role="page" attribute and the appropriate ID. What I am observing instead is that the scripts in the head section appear to be reloaded whenever I visit a new page of the application. This happens the first time the page is visited in the session and then stops happening.
It appears that Cordova is being reinitialized and that it is emitting the deviceready signal again. Using LogCat in Eclipse, I can see the debug message I placed in the onDeviceReady function. the setup() function is also being called again. This slows things down considerably.
Does anybody know where I'm going wrong? Is there a way to ensure that Cordova only loads once?
Thanks, Evan
I know that this issue is about 9 months old, but just in case my solution helps someone else with the same issue
Don't build your pages with display per HTML, instead build one long HTML page with each display part in it's own DIV with data-role="page"
Now, when you're changing page, you can use JQM's call of $.mobile.changePage() to change the display page
e.g. your page could look like this:
<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>
<div data-role="page" id="page2">
<p>more content here</p>
</div>
I know this seems counter-intuitive for most web development, but working with PhoneGap & JQM means NOT working in standard web development
这篇关于Cordova（PhoneGap）在jQuery Mobile应用程序的每一页上重新初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
