navegador - teclado numerico virtual javascript

PhoneGap: detectar si se ejecuta en el navegador de escritorio (30)

Estoy desarrollando una aplicación web que usa PhoneGap: Build para una versión móvil y desea tener una única base de código para las versiones ''escritorio'' y móvil. Quiero ser capaz de detectar si las llamadas PhoneGap funcionarán (es decir, si el usuario está en un dispositivo móvil compatible con PhoneGap).

He buscado y no puedo creer que no haya una forma simple de hacer esto. Muchas personas han ofrecido sugerencias;

Nada de eso funciona, a menos que elimines el archivo PhoneGap Javascript de la versión de escritorio de la aplicación, lo que me impide tener una sola base de código.

Hasta ahora, la única solución que he encontrado es el rastreo de agente de usuario / navegador, pero esto no es robusto, por decir lo menos. Cualquier mejor solución bienvenida!

EDITAR: Una solución marginalmente mejor es intentar llamar a una función PhoneGap después de un pequeño tiempo de espera; si no funciona, entonces suponga que el usuario está en un navegador web de escritorio.

Nada de eso funciona, a menos que elimines el archivo PhoneGap Javascript de la versión de escritorio de la aplicación, lo que me impide tener una sola base de código.

Otra opción sería usar la carpeta de fusiones , ver la captura de pantalla a continuación.

Puede agregar archivos específicos de la plataforma / anular los predeterminados.

(debe hacer el truco en algunos escenarios)

En otras palabras: en lugar de detectar el navegador, simplemente no incluye ciertos archivos para la creación del escritorio / adjuntar ciertos archivos solo para iOS.

Detecta el navegador de escritorio incluso si el dispositivo emular está activo

Funciona en máquinas con Windows y Mac. Necesidad de encontrar una solución para Linux Ver detalles

var mobileDevice = false; if(navigator.userAgent.match(/iPhone|iPad|iPod|Android|BlackBerry|IEMobile/)) mobileDevice = true; if(mobileDevice && navigator.platform.match(/Win|Mac/i)) mobileDevice = false; // This is desktop browser emulator if(mobileDevice) { // include cordova files }

Aarons, intenta

if (PhoneGap.available){ do PhoneGap stuff; }

Al igual que el póster original, estoy usando el servicio de creación de fajos de teléfono. Después de dos días y casi 50 compilaciones de prueba, he encontrado una solución elegante que funciona muy bien para mí.

No pude usar el sniffing de UA porque quería probar y ejecutar en navegadores móviles. Originalmente me había acostumbrado a la técnica bastante funcional de cobberboy. Esto no funcionó para mí porque el retraso / tiempo de espera "howPatientAreWe: 10000" era demasiado molesto para el desarrollo dentro del navegador. Y establecerlo más bajo ocasionalmente fallaría la prueba en el modo de aplicación / dispositivo. Tenía que haber otra manera...

El servicio de creación de fajos de teléfonos requiere que el archivo phonegap.js se omita en el repositorio de códigos antes de enviar los archivos de la aplicación al servicio. Por lo tanto, puedo probar su existencia para determinar si se está ejecutando en un navegador frente a una aplicación.

Otra advertencia, también estoy usando jQueryMobile, por lo que tanto jQM como phonegap tuvieron que inicializarse antes de que pudiera comenzar cualquier script personalizado. El siguiente código se coloca al principio de mi archivo index.js personalizado para la aplicación (después de jQuery, antes de jQM). También los documentos de compilación del teléfono dicen que coloque <script src="phonegap.js"></script> en algún lugar del HTML. Lo dejo completamente y lo cargo usando $ .getScript () para probar su existencia.

isPhoneGap = false; isPhoneGapReady = false; isjQMReady = false; $.getScript("phonegap.js") .done(function () { isPhoneGap = true; document.addEventListener("deviceready", function () { console.log("phonegap ready - device/app mode"); isPhoneGapReady = true; Application.checkReadyState(); }, false); }) .fail(function () { console.log("phonegap load failed - browser only"); isPhoneGapReady = true; Application.checkReadyState(); }); $(document).bind("mobileinit", function () { Application.mobileInit(); $(document).one("pageinit", "#Your_First_jQM_Page", function () { isjQMReady = true; Application.checkReadyState(); }); }); Application = { checkReadyState: function () { if (isjQMReady && isPhoneGapReady) { Application.ready(); } }, mobileInit: function () { // jQM initialization settings go here // i.e. $.mobile.defaultPageTransition = ''slide''; }, ready: function () { // Both phonegap (if available) and jQM are fired up and ready // let the custom scripting begin! } }

Creo que esto es más simple: var isPhoneGap = (location.protocol == "file:")

EDITAR para algunas personas que no funcionaron. Entonces podrías intentarlo (no lo has probado)

var isPhoneGap = ! /^http/.test(location.protocol);

Curiosamente, muchas respuestas, pero no incluyen estas tres opciones:

1 - El cordova.js configurará el objeto cordova en el ámbito global. Si está allí, es probable que se ejecute en un alcance de Cordova.

var isCordovaApp = !!window.cordova;

2 - Cordova ejecutará su aplicación como abriría un documento HTML desde su Escritorio. En lugar del protocolo HTTP usará ARCHIVO. Detectar esto te dará la oportunidad de asumir que tu aplicación se cargó localmente.

var isCordovaApp = document.URL.indexOf(''http://'') === -1 && document.URL.indexOf(''https://'') === -1;

3 - Use el evento load del script cordova para detectar el contexto. La secuencia de comandos include se puede eliminar fácilmente en el proceso de compilación o la carga del script simplemente fallará en un navegador. De modo que esta variable global no se establecerá.

<script src="../cordova.js" onload="javascript:window.isCordovaApp = true;"></script>

El crédito va para Damien Antipa de Adobe

De hecho, he descubierto que una combinación de dos de las técnicas enumeradas aquí ha funcionado mejor, en primer lugar, compruebe que se puede acceder a cordova / phonegap y compruebe también si el dispositivo está disponible. Al igual que:

function _initialize() { //do stuff } if (window.cordova && window.device) { document.addEventListener(''deviceready'', function () { _initialize(); }, false); } else { _initialize(); }

Escribí una post sobre esto hace unos días. Esta es la mejor solución que puedes encontrar (hasta que PhoneGap publique algo, tal vez o no), es corta, simple y perfecta (la he comprobado de todas las maneras posibles y en la plataforma).

Esta función hará el trabajo en el 98% de los casos.

/** * Determine whether the file loaded from PhoneGap or not */ function isPhoneGap() { return (window.cordova || window.PhoneGap || window.phonegap) && /^file://{3}[^//]/i.test(window.location.href) && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent); } if ( isPhoneGap() ) { alert("Running on PhoneGap!"); } else { alert("Not running on PhoneGap!"); }

Para completar el otro 2% de los casos, siga estos pasos (se trata de un cambio leve en el código nativo):

Crea un archivo llamado __phonegap_index.html , con la fuente:

 <script type="text/javascript"> function isPhoneGap() { //the function''s content is as described above } //ensure the 98% that this file is called from PhoneGap. //in case somebody accessed this file directly from the browser. if ( isPhoneGap() ) localStorage.setItem("isPhoneGap","1"); //and redirect to the main site file. window.location = "index.html"; </script>

Ahora, en native, simplemente cambie la página de inicio de index.html a __phonegap_index.html en todas sus plataformas PhoneGap. Digamos que el nombre de mi proyecto es un ejemplo , los archivos que necesita cambiar son (como para PhoneGap versión 2.2.0):

iOS - CordovaLibApp/AppDelegate.m
Android - src/org/apache/cordova/example/cordovaExample.java
Windows 8 - example/package.appxmanifest
BlackBerry - www/config.xml
WebOS - framework/appinfo.json
Bada - src/WebForm.cpp (línea 56)
Window Phone 7 - No tengo idea de dónde (alguien todavía se está desarrollando en esa plataforma ?!)

Finalmente, puede usarlo en cualquier lugar de su sitio, si se ejecuta en PhoneGap o no:

if ( localStorage.getItem("isPhoneGap") ) { alert("Running on PhoneGap!"); } else { alert("Not running on PhoneGap!"); }

Espero eso ayude. :-)

Estaba intentando con los objetos de la ventana, pero no funcionó ya que estaba abriendo la URL remota en el InAppBrowser. No se pudo hacer. Así que la mejor y más fácil forma de lograrlo fue agregar una cadena a la url que debe abrir desde la aplicación de phonegap. Luego, verifique si la ubicación del documento tiene una cadena adjunta.

A continuación se muestra el código simple para ello

var ref = window.open(''http://yourdomain.org#phonegap'', ''_blank'', ''location=yes'');

Verás que se agrega una cadena a la url "#phonegap" .Por lo tanto, en la URL del dominio agrega la siguiente secuencia de comandos

if(window.location.indexOf("#phonegap") > -1){ alert("Url Loaded in the phonegap App"); }

Esto funciona para mí (ejecuta 1.7.0)

if (window.device) { // Running on PhoneGap }

Probado en el escritorio Chrome y Safari.

Esto parece ser viable y lo he usado en producción:

if (document.location.protocol == "file:") { // file protocol indicates phonegap document.addEventListener("deviceready", function() { $(initInternal);} , false); } else { // no phonegap, start initialisation immediately $(initInternal); }

Fuente: http://tqcblog.com/2012/05/09/detecting-phonegap-cordova-on-startup/

He tropezado con este problema hace varios meses cuando comenzamos nuestra aplicación, porque también queríamos que la aplicación fuera " browser-compatible con el browser-compatible " (entendiendo que algunas funciones quedarían bloqueadas en ese escenario: grabación de audio, brújula, etc.) .

La única solución al 100% (e insisto en la condición 100 cien por ciento) para PRE-determinar el contexto de ejecución de la aplicación fue esta:

inicialice una variable de "bandera" de JS en verdadero, y cámbiela a falsa cuando se encuentre en un contexto completamente web;
por lo tanto, puede usar una llamada como " willIBeInPhoneGapSometimesInTheNearFuture() " (es PRE-PG, por supuesto, todavía necesita un método POST-PG para verificar si puede llamar a PG API, pero esa es trivial).
Luego dices: " but how do you determine the execution context ?"; la respuesta es: "usted no" (porque no creo que pueda hacerlo de manera confiable, a menos que esas personas brillantes en PG lo hicieran en su código API);
usted escribe un script de compilación que lo hace por usted: una base de código con dos variantes.

La esencia del problema es que mientras cordova.device no esté definido, su código no puede estar seguro si eso es porque cordova ha establecido que su dispositivo no es compatible, o si es porque cordova aún se está preparando y el dispositivo listo se activará más tarde. (o tercera opción: cordova no se cargó correctamente).

La única solución es definir un período de espera y decidir que después de este período su código debe suponer que el dispositivo no es compatible. Ojalá Córdoba establezca un parámetro en algún lugar para decir "Hemos intentado encontrar un dispositivo compatible y abandonado", pero parece que no hay tal parámetro.

Una vez establecido esto, es posible que desee hacer algo específico precisamente en aquellas situaciones donde no hay un dispositivo compatible. Como ocultar enlaces al mercado de aplicaciones del dispositivo, en mi caso.

He reconstruido esta función que debería cubrir prácticamente todas las situaciones. Le permite definir un controlador de dispositivo listo, un controlador de dispositivo que nunca está listo y un tiempo de espera.

//Deals with the possibility that the code will run on a non-phoneGap supported //device such as desktop browsers. Gives several options including waiting a while //for cordova to load after all. //In: //onceReady (function) - performed as soon as deviceready fires //patience // (int) - time to wait before establishing that cordova will never load // (boolean false) - don''t wait: assume that deviceready will never fire //neverReady // (function) - performed once it''s established deviceready will never fire // (boolean true) - if deviceready will never fire, run onceReady anyhow // (boolean false or undefined) - if deviceready will never fire, do nothing function deviceReadyOrNot(onceReady,patience,neverReady){ if (!window.cordova){ console.log(''Cordova was not loaded when it should have been'') if (typeof neverReady == "function"){neverReady();} //If phoneGap script loaded... } else { //And device is ready by now... if (cordova.device){ callback(); //...or it''s loaded but device is not ready } else { //...we might run the callback after if (typeof patience == "number"){ //Run the callback as soon as deviceready fires document.addEventListener(''deviceready.patience'',function(){ if (typeof onceReady == "function"){onceReady();} }) //Set a timeout to disable the listener window.setTimeout(function(){ //If patience has run out, unbind the handler $(document).unbind(''deviceready.patience''); //If desired, manually run the callback right now if (typeof neverReady == ''function''){neverReady();} },patience); //...or we might just do nothing } else { //Don''t bind a deviceready handler: assume it will never happen if (typeof neverReady == ''function''){neverReady();} else if (neverReady === true){onceReady();} else { //Do nothing } } } } }

La forma en que lo estoy haciendo es usar una variable global sobrescrita por una versión de solo navegador de cordova.js. En su archivo html principal (generalmente index.html ) tengo los siguientes scripts que dependen del orden:

<script> var __cordovaRunningOnBrowser__ = false </script> <script src="cordova.js"></script>  <script src="index.js"></script> 

Y dentro de cordova.js simplemente tengo:

__cordovaRunningOnBrowser__ = true

Al construir para un dispositivo móvil, no se usará cordova.js (y en su lugar se usará el archivo cordova.js específico de la plataforma), por lo que este método tiene el beneficio de ser 100% correcto independientemente de los protocolos, userAgents o biblioteca variables (que pueden cambiar). Puede haber otras cosas que deba incluir en cordova.js, pero aún no sé lo que son.

La forma más confiable que encontramos para saber si estamos en una aplicación cordova / phonegap es modificar el agente de usuario de la aplicación cordova utilizando esta configuración AppendUserAgent .

En config.xml agregue:

<preference name="AppendUserAgent" value="Cordova" />

Luego llame:

var isCordova = navigator.userAgent.match(/Cordova/i))

¿Por qué?

window.cordova y document.addEventListener(''deviceready'', function(){}); están sujetos a condiciones de carrera
navigator.standalone no funciona cuando <content src="index.html" /> es un sitio web (por ejemplo: <content src="https://www.example.com/index.html" /> o con cordova-plugin-remote-injection )
Tratar de incluir en la lista blanca a los agentes de usuarios para que adivinen si se trata de un navegador real es muy complicado. Los navegadores Android a menudo son vistas web personalizadas.

La solución de GeorgeW está bien, pero incluso en un dispositivo real, PhoneGap.available solo es cierto después de que las cosas de PhoneGap se hayan cargado, por ejemplo, se ha llamado a onDeviceReady en document.addEventListener (''deviceready'', onDeviceReady, false).

Antes de ese momento, si quieres saber, puedes hacer esto:

runningInPcBrowser = navigator.userAgent.indexOf(''Chrome'') >= 0 || navigator.userAgent.indexOf(''Firefox'') >= 0

Esta solución asume que la mayoría de los desarrolladores desarrollan usando Chrome o Firefox.

Ligeramente modificado, pero funciona perfectamente para mí sin problemas.

La intención es cargar Cordova solo cuando está en un dispositivo incrustado, no en un escritorio, así que evito completamente cordova en un navegador de escritorio. Las pruebas y el desarrollo de la interfaz de usuario y MVVM son muy cómodos.

Pon este código, por ej. en el archivo cordovaLoader.js

function isEmbedded() { return // maybe you can test for better conditions //&& /^file://{3}[^//]/i.test(window.location.href) && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent); } if ( isEmbedded() ) { var head= document.getElementsByTagName(''head'')[0]; var script= document.createElement(''script''); script.type= ''text/javascript''; script.src= ''cordova-2.7.0.js''; head.appendChild(script); }

Entonces, en lugar de incluir cordova javascript en sí, incluye cordovaLoader.js

<head> <script src="js/cordovaLoader.js"></script> <script src="js/jquery.js"></script> <script src="js/iscroll.js"></script> <script src="js/knockout-2.3.0.js"></script> </head>

¡Facilita tu trabajo! :)

Lo siguiente me funciona con la última PhoneGap / Cordova (2.1.0).

Cómo funciona:

Muy simple en concepto
Invertí la lógica de algunas de las soluciones de tiempo de espera anteriores.
Regístrese para el evento device_ready (como lo recomiendan los documentos PhoneGap )
- Si el evento aún NO se ha disparado después de un tiempo de espera, recurrir a asumir un navegador.
- Por el contrario, las otras soluciones anteriores se basan en probar algunas funciones de PhoneGap y en ver cómo se rompen las pruebas.

Ventajas:

Utiliza el evento device_ready recomendado por PhoneGap.
La aplicación móvil no tiene retraso. En cuanto se activa el evento device_ready, procedemos.
No hay sniffing de agente de usuario (me gusta probar mi aplicación como un sitio web móvil, por lo que el rastreo de navegador no era una opción para mí).
Sin dependencia de las características / propiedades de PhoneGap no documentadas (y por lo tanto frágiles).
Mantenga su cordova.js en su base de código incluso cuando use un escritorio o un navegador móvil. Por lo tanto, esto responde la pregunta del OP.
Wytze declaró anteriormente: "Desearía que cordova estableciera un parámetro en algún lugar para decir" Hemos intentado encontrar un dispositivo compatible y abandonado ", pero parece que no existe tal parámetro". Así que proporciono uno aquí.

Desventajas:

Los tiempos de espera son asquerosos. Pero nuestra lógica de aplicación móvil no se basa en un retraso; más bien, se usa como alternativa cuando estamos en el modo de navegador web.

Crea un nuevo proyecto PhoneGap en blanco. En la muestra proporcionada index.js, reemplace la variable "aplicación" en la parte inferior con esto:

No es realmente una respuesta a la pregunta, pero cuando pruebo en un navegador de escritorio, simplemente establezco un valor de almacenamiento local para hacer que el navegador cargue la aplicación a pesar de que el dispositivo ya no está disparando.

function main() { // Initiating the app here. }; /* Listen for ready events from pheongap */ document.addEventListener("deviceready", main, false); // When testing outside ipad app, use jquerys ready event instead. $(function() { if (localStorage["notPhonegap"]) { main(); } });

Otra forma, basada en la solución de SlavikMe:

Simplemente use un parámetro de consulta pasado a index.html desde su fuente PhoneGap. Es decir, en Android, en lugar de

super.loadUrl("file:///android_asset/www/index.html");

utilizar

super.loadUrl("file:///android_asset/www/index.html?phonegap=1");

SlavikMe tiene una excelente lista de dónde hacer esto en otras plataformas.

Entonces su index.html puede simplemente hacer esto:

if (window.location.href.match(/phonegap=1/)) { alert("phonegap"); } else { alert("not phonegap"); }

Para mantener una base de código, lo que interesa es la "plataforma" en la que se ejecuta el código. Para mí, esta "plataforma" puede ser tres cosas diferentes:

0: navegador de la computadora
1: navegador móvil
2: teléfono / cordova

La forma de verificar la plataforma:

var platform; try { cordova.exec(function (param) { platform = 2; }, function (err) {}, "Echo", "echo", ["test"]); } catch (e) { platform = ''ontouchstart'' in document.documentElement ? 1 : 0; }

Nota:

Esto debe ejecutarse solo después de que se haya cargado cordova.js (body onload (...), $ (document) .ready (...))
''ontouchstart'' en document.documentElement estará presente en computadoras portátiles y monitores de escritorio que tengan una pantalla táctil habilitada para que informe un navegador móvil aunque sea un escritorio. Hay diferentes maneras de hacer un control más preciso, pero lo uso porque todavía se ocupa del 99% de los casos que necesito. Siempre puede sustituir esa línea por algo más sólido.

Pruebe este enfoque:

/** * Returns true if the application is running on an actual mobile device. */ function isOnDevice(){ return navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); } function isDeviceiOS(){ return navigator.userAgent.match(/(iPhone)/); } /** * Method for invoking functions once the DOM and the device are ready. This is * a replacement function for the JQuery provided method i.e. * $(document).ready(...). */ function invokeOnReady(callback){ $(document).ready(function(){ if (isOnDevice()) { document.addEventListener("deviceready", callback, false); } else { invoke(callback); } }); }

Sé que ha sido respondido hace un tiempo, pero "PhoneGap.available" ya no existe. Deberías usar:

if (window.PhoneGap) { //do stuff }

o desde 1.7, preferir:

if (window.cordova) { //do stuff }

Solo para obtener información sobre el camino en PhoneGap 3.x Mobile Application Development Hotshot

y en el marco YASMF

https://github.com/photokandyStudios/YASMF-Next/blob/master/lib/yasmf/util/core.js#L152

Supongo que de alguna manera no son tan diferentes, ¿verdad? Ja, ja ... no gracioso. ¿Quién no pensó que esto no sería un problema? Aquí está la solución más simple para sus consideraciones. Empuja diferentes archivos a tu servidor y luego a PhoneGap. También iría temporalmente con el http: check sugerido anteriormente.

var isMobileBrowserAndNotPhoneGap = (document.location.protocol == "http:");

Mi interés es empujar la barra de navegación de los navegadores, así que realmente puedo eliminar la etiqueta del script aislado y presionar Rebuild [en DW] (de todos modos, habrá una limpieza para la implementación, así que esta puede ser una de esas tareas.) De todos modos, me siento es una buena opción (teniendo en cuenta que no hay mucho más disponible) para realizar comentarios de manera manual de manera eficiente con isMobileBrowserAndNotPhoneGap al presionar PG). Nuevamente, para mí en mi situación, borraré simplemente la etiqueta del archivo (código aislado) que empuja hacia arriba la barra de navegación cuando es un navegador móvil (será mucho más rápido y más pequeño). [Entonces, si puede aislar el código para esa solución optimizada pero manual.]

Tengo el mismo problema.

Me estoy inclinando por agregar # cordova = verdadero a la URL cargada por el cliente de cordova y probando location.hash.indexOf ("cordova = true")> -1 en mi página web.

Utilizo una combinación de lo sugerido por GeorgeW y mkprogramming :

if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { onDeviceReady(); } else if (Phonegap.available){ onDeviceReady(); } else { console.log(''There was an error loading Phonegap.'') }

Yo uso este código:

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

ACTUALIZAR

Hay muchas otras maneras de detectar si phonegap se está ejecutando en un navegador o no, aquí hay otra gran opción:

var app = document.URL.indexOf( ''http://'' ) === -1 && document.URL.indexOf( ''https://'' ) === -1; if ( app ) { // PhoneGap application } else { // Web page }

como se ve aquí: detectar entre un navegador móvil o una aplicación PhoneGap

Yo uso este método:

debug = (window.cordova === undefined);

debug será true en el entorno del navegador, false en el dispositivo.

if ( "device" in window ) { // phonegap } else { // browser }