javascript - online - Cómo disparar el evento de dispositivo listo en el navegador Chrome(tratando de depurar el proyecto de phonegap)

depurar javascript online

Question

Estoy desarrollando una aplicación PhoneGap y me gustaría poder depurarla en Chrome en lugar de en el teléfono. Sin embargo, hago la inicialización de mi código en una función onDeviceReady () que se activa cuando PhoneGap dispara el evento "deviceready". Como Chrome no activa este evento, mi código nunca se inicializa.

Aquí hay una versión simplificada de mi código:

var dashboard = {};
$(document).ready(function() {
document.addEventListener("deviceready", dashboard.onDeviceReady, false);
});
dashboard.onDeviceReady = function() {
alert("hello!"); //this is never fired in Chrome
};

Intenté usar el código StopGap , que básicamente hace lo siguiente:

var e = document.createEvent(''Events'');
e.initEvent("deviceready");
document.dispatchEvent(e);

Pero cuando ejecuto ese código en la consola de JavaScript de Chrome, la alerta "hola" todavía no se activa. ¿Qué estoy haciendo mal? ¿O Chrome no es compatible con disparar eventos "personalizados" como el dispositivo listo?

Answer 1

Agregue este código a su función de controlador onLoad:

 if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}

El evento "deviceready" se activa en cordova.js, por lo que no conozco una forma de detectar la existencia de este evento en el código de la aplicación.

Answer 2

La detección de windows.device de user318696 funciona bien. Si usa Kendo UI Mobile y PhoneGap, la siguiente secuencia de comandos habilitará la funcionalidad tanto en las compilaciones de PhoneGap como en los navegadores web. Esto se basa en el proyecto PhoneGap Build Bootstrap de Burke Holland para Kendo UI Mobile y está destinado a colocarse en la parte inferior de la página antes de la etiqueta de cierre del cuerpo.

 <script type="text/javascript">
var tkj = tkj || {};
tkj.run = (function () {
// create the Kendo UI Mobile application
tkj.app = new kendo.mobile.Application(document.body);
});
// this is called when the intial view shows. it prevents the flash of unstyled content (FOUC)
tkj.show = (function () {
$(document.body).show();
});
(function () {
if (!window.device) {
//initialize immediately for web browsers
tkj.run();
}
else if (navigator.userAgent.indexOf(''Browzr'') > -1) {
// blackberry
setTimeout(tkj.run, 250)
} else {
// attach to deviceready event, which is fired when phonegap is all good to go.
document.addEventListener(''deviceready'', tkj.run, false);
}
})();
</script>

Answer 3

Mejorando la sugerencia de Chemik. El siguiente código usa la cadena navigator.userAgent para determinar genéricamente si el navegador del cliente se encuentra en una plataforma móvil.

El propósito de la separación de los navegadores de escritorio es permitir la verificación de código antes de compilar / instalar la aplicación android, etc. Es mucho más rápido hacer un cambio rápido de código, actualizar el navegador de escritorio frente a compilar en eclipse y cargar en android. Otra ventaja adicional es la posibilidad de usar weinre en una pestaña y el index.html de los recursos de Android en otra pestaña (y usar Firebug).

PD: el código weinre está excluido ya que tiene mi información privada de VPS y UUID.

¡Gracias!

<!-- Framework:jQuery -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.2, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" >
<link href="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css" type="text/css" media="screen" rel="stylesheet" title="JQuery Mobile">
<script src="./framework/jquery/jquery-1.8.2.min.js"></script>
<script src="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- Framework:Weinre -->
<!-- Framework:PhoneGap -->
<script src="./framework/phonegap/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var mobile = false;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", function(){mobile = true; onDeviceReady();}, false);
} else {
$(document).ready(onDeviceReady);
}
function onDeviceReady() {
setEvents();
test();
if (mobile) {
navigator.notification.alert("Debugging-ready for/n" + navigator.userAgent);
} else {
alert("Debugging-ready for/n" + navigator.userAgent);
}
};
</script>

Answer 4

Para mi sitio móvil y aplicación móvil, estoy usando el siguiente código con jQuery:

function init() { ... };
if ("cordova" in window) {
$(document).on("deviceready", init);
} else {
$(init);
}

Answer 5

Simula eventos como este:

const simulateEvent = (eventName, attrs = {customData:"data"}, time = 1000, target = document) => {
let event = new CustomEvent(eventName, { detail: attrs });
setTimeout(() => {
target.dispatchEvent(event);
}, time);
};
var divReady = document.querySelector(''div#ready'');
document.addEventListener(''deviceready'', (e) => {
console.log("triggered with:", e.detail);
divReady.innerHTML = `Ready! ${JSON.stringify(e.detail)}`;
});
simulateEvent(''deviceready'', {customData:"My custom data goes in event.detail"});

<div id="ready"> Wait for ready... </div>

Answer 6

Terminó sacando el código StopGap y teniendo que introducir un pequeño retraso (hacer que este código se ejecute en un script separado que el código específico de la página):

window.setTimeout(function() {
var e = document.createEvent(''Events'');
e.initEvent("deviceready", true, false);
document.dispatchEvent(e);
}, 50);

Answer 7

Use el emulador móvil Ripple. Es gratis en Chrome Web Store. Cuando está instalado, vaya a la página que desea probar, haga clic derecho en la página y seleccione Ripple Mobile Emulator> Enable. Cuando se le solicite, elija PhoneGap.

El emulador es bueno, pero todavía está en versión beta, por lo que no todo se ha implementado todavía.

Ad @ m

Answer 8

Yo uso Safari para la depuración y hago esto:

//my standard PG device ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//debug("onDeviceReady")
getDefaultPageSetup();
}
//then add this (for safari
window.onload = function () {
if(! window.device)
onDeviceReady()
}

Answer 9

user318696 tenía la magia que estaba buscando. "dispositivo" está definido en cordova y no se define cuando está en un navegador (envoltorio de aplicación que no es phoneGap).

EDITADO:

Me encontré con un escenario en el que Cordova tardó bastante en inicializar en un dispositivo y la respuesta "original" aquí ya no era válida. Pasé a requerir un parámetro en la URL al ejecutar pruebas en el navegador. (en el ejemplo estoy buscando "testing =" en la url de la página original)

$(document).ready(function () {
// ALWAYS LISTEN
document.addEventListener("deviceready", main, false);
// WEB BROWSER
var url = window.location.href;
if ( url.indexOf("testing=") > -1 ) {
setTimeout(main, 500);
}
});

ORIGINAL:

No he cavado lo suficiente como para saber cuánto tiempo debo confiar en esto [¿podrían comenzar a definir el "dispositivo" en el navegador en una versión futura?] Pero al menos hasta 2.6.0 esto es seguro:

$(document).ready(function () {
// call main from Cordova
if ( window.device ) {
document.addEventListener("deviceready", main, false);
}
// from browser
else {
main();
}
});