Cordova页面加载的事件
概述
通常一个UI的运行过程都会涉及到一些事件,基于HTML5 UI的Cordova也不例外,Cordova除了兼容HTML5本身的一些内建事件外还包含他特有的事件,比如deviceready。
三个重要事件
deviceready事件
Cordova提供的通过HTML5调用Native功能并不是立即就能使用的
Cordova框架在读入HTML5代码之后进行HTML5和Native建立桥接,桥接的初始化完成后才能调用Native功能,与此同时Cordova会调用他自身特有的事件,即deviceready事件
deviceready事件是在每回读入HTML的时候都会被调用,而不只是每次应用启动时调用
下面是一个真实项目中的使用示例:
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
//后退的处理
document.addEventListener("backbutton", function (e) {
if(J.isMenuOpen){
J.Menu.hide();
}else if(J.hasPopupOpen){
J.closePopup();
}else{
var sectionId = $('section.active').attr('id');
if(sectionId == 'index_section'){
J.confirm('提示','是否退出程序?',function(){
navigator.app.exitApp();
});
}else{
J.Router.back();
}
}
}, false);
App.run();
navigator.splashscreen.hide(); //隐藏Splash画面
}
DOMContentLoaded事件
DOM内容加载完成后即触发
load事件
DOMContentLoaded事件之后,其他资源加载完成后触发
因此以上三个事件的执行顺序如下
DOMContentLoaded -> load -> deviceready
可以看出load事件的执行速度会影响到deviceready事件的调用,通常我们把一些不必要的资源放在deviceready事件之后调用以提高执行速度
JS错误的捕获
Cordova的app当js执行失败时前台默认不会有任何提示,通常发现点击没有任何反应,很可能JS执行出错了,怎样暴露出这些出错信息以方便调试呢?
window.onerror = function(msg, url, line) {
var idx = url.lastIndexOf("/");
if(idx > -1) {
url = url.substring(idx+1);
}
alert("ERROR in " + url + " (line #" + line + "): " + msg);
return false;
};
通过加入上述监听即可捕获JavaScript的Error信息。