Cordova 3.x 基础（4） -- deviceready事件

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

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

document.addEventListener('deviceready', function () {
  console.log('Device is Ready!');
  // ....your code
}, false);

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

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

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

load事件
在DOMContentLoaded事件之后，其他资源加载完成后触发。

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

document.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded OK!');
}, false);

window.addEventListener('load', function () {
  console.log('load OK!');
}, false);

document.addEventListener('deviceready', function () {
  console.log('deviceready OK!');
}, false);

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

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;
};

评论

6 楼 WCMYCML 2015-12-09  

                                    

5 楼 Nikns 2015-08-04  

   

4 楼 william_miao 2015-01-06  

楼主，cordova的插件都需要在deviceready的callback函数中实现么？

3 楼 lq83623 2014-12-18  

lq83623 写道

您好，  楼主， deviceready 这个事html5的事件吗？我查了下w3c的html5的说明，没有看到这个事件。我在Cordova.js 里面 看到
    channel.join(function() {
        require('cordova').fireDocumentEvent('deviceready');
    }, channel.deviceReadyChannelsArray);

这个事发布deviceready事件吗？我这里没太理解 native怎么通知javascript已经准备好的。
在 CDVViewController.m＃webViewDidFinishLoad 这个里面应该是 表明 html已经加载完成
通过NSNotification，调用了CDVViewController.m＃onPageDidLoad但是跟踪后也没看到回调到js，楼主对这块是怎么理解能解释一下么？

楼主 不好意思，我这里看的是ios

2 楼 lq83623 2014-12-18  

您好，  楼主， deviceready 这个事html5的事件吗？我查了下w3c的html5的说明，没有看到这个事件。我在Cordova.js 里面 看到
    channel.join(function() {
        require('cordova').fireDocumentEvent('deviceready');
    }, channel.deviceReadyChannelsArray);

这个事发布deviceready事件吗？我这里没太理解 native怎么通知javascript已经准备好的。
在 CDVViewController.m＃webViewDidFinishLoad 这个里面应该是 表明 html已经加载完成
通过NSNotification，调用了CDVViewController.m＃onPageDidLoad但是跟踪后也没看到回调到js，楼主对这块是怎么理解能解释一下么？

1 楼 赫克托尔 2014-08-18  

楼主，console.log('deviceready OK!'); 这条log怎么看到的，我找eclipse怎么找不到这条logcat