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

博客分類： Cordova

CordovaPhoneGap 

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

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

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

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