PhoneGap / Android应用程序上的黑屏

Question

I'm struggling with a Phonegap-Android application. I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1, with Phonegap 2.9.0. I've got some data-role pages in my index.html and I'm generating some other dynamically with an ajax function. The problem is that always, after showing a dynamically generated page the screen goes all white. This never happens if I navigate between pages statically created in the index.html.

Any suggestions? I've tried with:

• < meta name="viewport" content="width=device-width, user-scalable=no" />

• CSS: .ui-page { -webkit-transform: translateZ(0); -webkit-perspective:1000; -webkit-backface-visibility: hidden; -msie-backface-visibility: hidden; -ms-backface-visibility: hidden; }

• defaultPageTransition = "none"

The new pages are created using Mustache.js.

Answer 1

Something to quickly try would be to globally enable DOM caching in jQuery Mobile:

$.mobile.page.prototype.options.domCache = true;

or

pageContainerElement.page({ domCache: true });

I would say it stems from a given page not containing the dynamically generated markup, which you need in order to utilize jQM's ajax navigation... which uses it's own internal history tracking object to fuel the hashchange and/or popstate event.

Beyond that, I would step through how the dynamic pages are actually being added to the DOM. You should be able to keep using Mustache's template plugin, but you'll have to make sure to use the jQM to add the markup to the DOM. (Or go through a potentially long process of creating overrides... which I think you should avoid if possible.)

When you use jQM to update the DOM, it ensures the correct events fire and in the correct order, thus keeping the app data/state up-to-date.

I'm sure you're using the documentation, but I would give this another look. Might give you a better idea on what Mustache method you need to stop using, or extend/override.

Hope this helps.

jQM References

DOM Caching: http://view.jquerymobile.com/1.3.1/dist/demos/#nav-cache

Navigation Event: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/#nav-event-example

Dynamic Page Loading: http://jquerymobile.com/demos/1.3.1/docs/pages/page-dynamic.html