Cordova页面加载的事件

### 概述
通常一个UI的运行过程都会涉及到一些事件，基于HTML5 UI的Cordova也不例外，Cordova除了兼容HTML5本身的一些内建事件外还包含他特有的事件，比如deviceready。

### 三个重要事件
#### deviceready事件
Cordova提供的通过HTML5调用Native功能并不是立即就能使用的

Cordova框架在读入HTML5代码之后进行HTML5和Native建立桥接，桥接的初始化完成后才能调用Native功能，与此同时Cordova会调用他自身特有的事件，即deviceready事件

deviceready事件是在每回读入HTML的时候都会被调用，而不只是每次应用启动时调用

下面是一个真实项目中的使用示例:
```js
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信息。

Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Information

Tag

April 2023

分类

官方公众号

About This Entry

About This Blog

最近发布

Friend Links