Phonegap不调用设备就绪功能 [英] Phonegap not calling device ready function
本文介绍了Phonegap不调用设备就绪功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法使设备就绪功能在phonegap即xcode模拟器中工作。 html如下：`
< title> Boilerplate< / title>
< / head>
< body>
< div id =maindata-role =page>
< div data-role =headerclass =logo>
< img class =logosrc =img / premium-logo.jpg/>
< / div>
< div data-role =content>
< h1> Apache Cordova测试区< / h1>
< div class =test-zoneid =test-zone>
< / div>
< / div>
< div data-role =footer>
< h4>主页页脚< / h4>
< / div>
< / div>
< script type =text / javascriptsrc =js / jquery-2.0.3.min.js>< / script>
< script type =text / javascriptsrc =js / jQuery-Mobile-1.3.1-min.js>< / script>
< script type =text / javascriptsrc =cordova-2.3.0.js>< / script>
< script type =text / javascriptsrc =js / index.js>< / script>
< script type =text / javascript>
$（document）.ready（init（））;
< / script>
< / body>
Javascript文件index.js ：
function init（）{
document.addEventListener（deviceready，onDeviceReady，false）;
}
function onDeviceReady（）{
alert（'It works！'）;
}
如果我注释掉init函数内部的行并替换为onDeviceReady （）;我可以得到警告工作铬。
为什么它不工作在模拟器上面的代码。
谢谢
解决方案
onDeviceReady事件仅适用于从设备模拟器测试您的phonegap应用程序， / p>
这是我发现做两个框架（phonegap和jQuery Mobile）一起工作的最好方法。
在我的index.html
< script type =text / javascriptsrc =js / libs / LABjs / LAB.min.js>< / script>
< script type =text / javascriptsrc =js / libs / jQuery / jquery-1.9.1.js>< / script&
< script type =text / javascriptsrc =js / index.js>< / script>
< script type =text / javascriptsrc =js / libs / jQuery / jquery.mobile-1.3.1.js>< / script&
请注意，我使用LABjs库加载JS脚本（cordova.js仅加载
在我的js / index.js
$ 中，如果我们检测到我们在一个设备中， b$ b
var deviceReadyDeferred = $ .Deferred（）;
var jqmReadyDeferred = $ .Deferred（）;
var resourcesReady = false;
var app = {
//应用程序构造函数
initialize：function（）{
document.addEventListener（'deviceready'，this.onDeviceReady，假）;
//加载脚本
if（navigator.userAgent.match（/（iPhone | iPod | iPad | Android | BlackBerry）/））{
$ LAB.script cordova.js）。wait（
function（）{
document.addEventListener（'deviceready'，this.onDeviceReady，false）;
console.log（'We are on Device' ;
}
）;
} else
{
console.log（'我们在浏览器'）;
var _this = this;
setTimeout（function（）{
_this.onDeviceReady（）;
}，1）;
}
console.log（'app.initialize（）Called'）;
$ .when（deviceReadyDeferred，jqmReadyDeferred）.then（this.doWhenBothFrameworksReady）;
}，
// deviceready事件处理程序
onDeviceReady：function（）{
console.log（onDeviceReady）;
deviceReadyDeferred.resolve（）;
}，
doWhenBothFrameworksReady：function（）
{
console.log（doWhenBothFrameworksReady）;
resourcesReady = true;
}
};
$（document）.one（mobileinit，function（）{
$ .support.cors = true;
$ .mobile.allowCrossDomainPages = true;
$ .mobile.phonegapNavigationEnabled = true;
console.log（'MobileInit'）;
jqmReadyDeferred.resolve（）;
}）;
函数PageShowFunction（e）
{
//我们确信这两个框架都已准备就绪
}
function callPageEvent（funcToCall，e）
{
if（resourcesReady）
{
return funcToCall（e）;
} else
{
setTimeout（function（）{
CallPageEvent（funcToCall，e）;
}，200）;
}
}
$（document）.ready（function（）{
console.log（document ready）;
//所有页面上的jQuery Mobile页面事件必须附加在这里否则将太晚
//例如：
//我使用CallPageEvent因为这个事件可以在设备准备之前调用
/ *
$（＃page）。on（pageshow，function（e）{
CallPageEvent（PageShowFunction，e）;
}
*
}）;
app.initialize（）;
I am unable to get the device ready function to work within phonegap i.e. xcode simulator. The html is as follow: `
<title>Boilerplate</title>
</head>
<body>
<div id="main" data-role="page">
<div data-role="header" class="logo">
<img class="logo" src="img/premium-logo.jpg" />
</div>
<div data-role="content">
<h1>Apache Cordova Test Zone</h1>
<div class="test-zone" id="test-zone">
</div>
</div>
<div data-role="footer">
<h4>Footer of main page</h4>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jQuery-Mobile-1.3.1-min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(init());
</script>
</body>
the Javascript file index.js:
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('It works!');
}
If i comment out the line inside the init function and replace it simply with onDeviceReady(); I can get the alert to work on chrome.
Why won't it work in the simulator with the code above. Thank you
解决方案
onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.
Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.
In my index.html
<script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>
Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.
In my "js/index.js"
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
var resourcesReady = false;
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
//load scripts
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
$LAB.script("cordova.js").wait(
function(){
document.addEventListener('deviceready', this.onDeviceReady, false);
console.log('We are on Device');
}
);
}else
{
console.log('We are on Browser');
var _this = this;
setTimeout(function(){
_this.onDeviceReady();
}, 1);
}
console.log('app.initialize() Called');
$.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
},
// deviceready Event Handler
onDeviceReady: function() {
console.log("onDeviceReady");
deviceReadyDeferred.resolve();
},
doWhenBothFrameworksReady: function()
{
console.log("doWhenBothFrameworksReady");
resourcesReady = true;
}
};
$(document).one("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
console.log('MobileInit');
jqmReadyDeferred.resolve();
});
function PageShowFunction(e)
{
// we are sure that both frameworks are ready here
}
function CallPageEvent(funcToCall,e)
{
if(resourcesReady)
{
return funcToCall(e);
}else
{
setTimeout(function() {
CallPageEvent(funcToCall,e);
}, 200);
}
}
$(document).ready(function () {
console.log("document ready");
// ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late
// example:
// I use the CallPageEvent beacause this event could be called before the device ready
/*
$("#page").on("pageshow", function(e) {
CallPageEvent(PageShowFunction,e);
}
*/
});
app.initialize();
这篇关于Phonegap不调用设备就绪功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
