Cordova页面加载的事件

概述

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

三个重要事件

deviceready事件

Cordova提供的通过HTML5调用Native功能并不是立即就能使用的

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

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

下面是一个真实项目中的使用示例:

  1. document.addEventListener('deviceready', onDeviceReady, false);
  2. function onDeviceReady(){
  3. //后退的处理
  4. document.addEventListener("backbutton", function (e) {
  5. if(J.isMenuOpen){
  6. J.Menu.hide();
  7. }else if(J.hasPopupOpen){
  8. J.closePopup();
  9. }else{
  10. var sectionId = $('section.active').attr('id');
  11. if(sectionId == 'index_section'){
  12. J.confirm('提示','是否退出程序?',function(){
  13. navigator.app.exitApp();
  14. });
  15. }else{
  16. J.Router.back();
  17. }
  18. }
  19. }, false);
  20. App.run();
  21. navigator.splashscreen.hide(); //隐藏Splash画面
  22. }

DOMContentLoaded事件

DOM内容加载完成后即触发

load事件

DOMContentLoaded事件之后,其他资源加载完成后触发


因此以上三个事件的执行顺序如下

  1. DOMContentLoaded -> load -> deviceready

可以看出load事件的执行速度会影响到deviceready事件的调用,通常我们把一些不必要的资源放在deviceready事件之后调用以提高执行速度

JS错误的捕获

Cordova的app当js执行失败时前台默认不会有任何提示,通常发现点击没有任何反应,很可能JS执行出错了,怎样暴露出这些出错信息以方便调试呢?

  1. window.onerror = function(msg, url, line) {
  2. var idx = url.lastIndexOf("/");
  3. if(idx > -1) {
  4. url = url.substring(idx+1);
  5. }
  6. alert("ERROR in " + url + " (line #" + line + "): " + msg);
  7. return false;
  8. };

通过加入上述监听即可捕获JavaScript的Error信息。


Related