Cordova3.x基础（4）deviceready事件

Cordova框架中第一个应该掌握的就是这个deviceready事件。采用Cordova开发的应用在运行的时候&＃xff0c;Cordova提供的通过HTML5调用Native功能并不是立即就能使用的&＃xff0c;Cordova框架在读入HTML5代码之后&＃xff0c;要进行HTML5和Native建立桥接&＃xff0c;在未能完成这个桥接的初始的情况下&＃xff0c;是不能调用Native功能的。在Cordova框架中&＃xff0c;当这个桥接的初始化完成后&＃xff0c;会调用他自身特有的事件&＃xff0c;即deviceready事件。 

所以首先应该在HTML中注册deviceready的事件监听&＃xff0c;在它的CallBack函数中再去使用Cordova的功能。 

Js代码  

1. document.addEventListener(&＃39;deviceready&＃39;, function () {  

2.   console.log(&＃39;Device is Ready!&＃39;);  

3.   // ....your code  

4. }, false);  

需要注意的是&＃xff0c;deviceready事件是在每回读入HTML的时候都会被调用&＃xff0c;而不只是应用启动时调用。 

除了deviceready事件以外&＃xff0c;Cordova应用在内部读取HTML代码的时候还会调用一些其他的事件。但这些并不是Cordova框架提供的事件&＃xff0c;而是嵌入的Webview的浏览器Render引擎提供的。 

DOMContentLoaded事件 
页面的DOM内容加载完成后即触发,而无需等待其他资源&＃xff08;CSS、JS&＃xff09;的加载。 

load事件 
在DOMContentLoaded事件之后&＃xff0c;其他资源加载完成后触发。 

所以&＃xff0c;其实调用的顺序是&＃xff1a;DOMContentLoaded -> load -> deviceready 
deviceready事件一定是在load事件之后&＃xff0c;所以load事件的执行速度会影响到deviceready事件的调用。把一些不必要的资源可以在deviceready事件之后调用从而提高执行速度。 

Js代码  

1. document.addEventListener(&＃39;DOMContentLoaded&＃39;, function () {  

2.   console.log(&＃39;DOMContentLoaded OK!&＃39;);  

3. }, false);  

4.   

5. window.addEventListener(&＃39;load&＃39;, function () {  

6.   console.log(&＃39;load OK!&＃39;);  

7. }, false);  

8.   

9. document.addEventListener(&＃39;deviceready&＃39;, function () {  

10.   console.log(&＃39;deviceready OK!&＃39;);  

11. }, false);  

 

需要注意的是&＃xff0c;在Cordova的app中如果js执行失败&＃xff0c;前台不会有任何提示&＃xff08;后台会出log&＃xff09;&＃xff0c;所以很多时候点击都没有任何反应&＃xff0c;那说明JS执行出错了&＃xff0c;把以下代码加到index.html中&＃xff0c;当应用发生JS错误的时候&＃xff0c;会调用window的onerror方法从而显示错误信息&＃xff0c;从而捕获Javascript的Error提示用户。 

Js代码  

1. window.onerror &＃61; function(msg, url, line) {  

2.    var idx &＃61; url.lastIndexOf("/");  

3.    if(idx > -1) {  

4.     url &＃61; url.substring(idx&＃43;1);  

5.    }  

6.    alert("ERROR in " &＃43; url &＃43; " (line #" &＃43; line &＃43; "): " &＃43; msg);  

7.    return false;  

8. };