javascript Phonegap 未调用设备就绪功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17808586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phonegap not calling device ready function
提问by psycho
I am unable to get the device ready function to work within phonegap i.e. xcode simulator. The html is as follow: `
我无法让设备就绪功能在 phonegap 中工作，即 xcode 模拟器。html如下：`
<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:
Javascript 文件 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.
如果我注释掉 init 函数内的行并简单地将其替换为 onDeviceReady(); 我可以收到在 chrome 上工作的警报。
Why won't it work in the simulator with the code above. Thank you
为什么它不能在模拟器中使用上面的代码工作。谢谢
回答by ElLocoCocoLoco
onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.
onDeviceReady 事件仅在从设备模拟器测试您的 phonegap 应用程序时才有效，而不是在 chrome 中。
Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.
这是我发现将两个框架（phonegap 和 jQuery Mobile）协同工作的最佳方式。
In my index.html
在我的 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.
请注意，我使用 LABjs 库来加载 JS 脚本（仅当我们检测到我们在设备中时才会加载cordova.js），您可以在 google 中找到 LABjs 库。
In my "js/index.js"
在我的“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();
回答by Muhammed Irfan
Add
添加
<script type="text/javascript" src="cordova.js"></script>
inside your index.html file, worked for me ;)
在你的 index.html 文件中，对我来说有效；)
回答by Arjun T Raj
just use
只是使用
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
init();
</script>
INSTEAD OF
代替
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(function(){ init(); });
</script>`
