web-dev-qa-db-fra.com

PhoneGap: Détecter si exécuté sur le navigateur du bureau

Je développe une application Web qui utilise PhoneGap: Build pour une version mobile et souhaite disposer d'une base de code unique pour les versions "desktop" et mobile. Je veux pouvoir détecter si les appels PhoneGap fonctionneront (c’est-à-dire si l’utilisateur d’un appareil mobile prend en charge PhoneGap).

J'ai cherché et je ne peux pas croire qu'il n'y a pas de moyen simple de le faire. Beaucoup de gens ont offert des suggestions.

Aucune de ces méthodes ne fonctionne, sauf si vous supprimez le fichier Javascript PhoneGap de la version de bureau de l'application, ce qui va à l'encontre de mon objectif, qui est d'avoir une seule base de code.

Jusqu’à présent, la seule solution que j’ai trouvée est le sniffing agent/navigateur, mais ce n’est pas robuste pour le moins. Toutes les meilleures solutions sont les bienvenues!

EDIT: une solution légèrement meilleure consiste à appeler une fonction PhoneGap après un petit délai - si cela ne fonctionne pas, supposons que l’utilisateur se trouve sur un navigateur Web.

javascriptcordova
113
aaronsnoswell

J'utilise ce code: 

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

METTRE À JOUR

Il existe de nombreuses autres façons de détecter si phonegap est exécuté sur un navigateur ou non. Voici une autre excellente option: 

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

comme on le voit ici: Détecter entre un navigateur mobile ou une application PhoneGap

109
sirmdawg

J'ai écrit un post à ce sujet il y a quelques jours. C'est la meilleure solution que vous puissiez trouver (jusqu'à ce que PhoneGap publie quelque chose, peut-être ou peut-être pas), elle est courte, simple et parfaite (je l'ai vérifiée de toutes les manières et sur toutes les plateformes).

Cette fonction fera le travail dans 98% des cas.

/**
 * 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!");
}

Pour compléter les 2% restants, procédez comme suit (cela implique une légère modification du code natif):

Créez un fichier appelé __phonegap_index.html, avec la source:

<!-- __phonegap_index.html -->
<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>

Maintenant, en mode natif, changez simplement la page de démarrage de index.html à __phonegap_index.html sur toutes vos plateformes PhoneGap. Disons que mon nom de projet est exemple, les fichiers que vous devez modifier sont (comme pour PhoneGap version 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 (ligne 56)
  • Window Phone 7 - Vous ne savez pas où (quelqu'un développe encore sur cette plate-forme?!)

Enfin, vous pouvez l’utiliser n’importe où sur votre site, que ce soit sur PhoneGap ou non:

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

J'espère que ça aide. :-)

49
Slavik Meltser

Je sais que la réponse a été donnée il y a quelque temps, mais "PhoneGap.available" n'existe plus.

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

ou depuis 1.7, préférez:

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

La façon la plus fiable de déterminer si nous sommes dans une application cordova/phonegap est de modifier l'agent utilisateur de l'application cordova à l'aide de cette configuration AppendUserAgent .

Dans config.xml ajouter:

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

Puis appelez:

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

Pourquoi?

  1. window.cordova et document.addEventListener('deviceready', function(){}); sont soumis aux conditions de course 
  2. navigator.standalone ne fonctionne pas lorsque <content src="index.html" /> est un site Web (Ex: <content src="https://www.example.com/index.html" /> ou avec cordova-plugin-remote-injection )
  3. Il est très compliqué d'essayer de mettre en liste blanche les agents utilisateurs pour savoir s'il s'agit d'un véritable navigateur. Les navigateurs Android sont souvent des vues Web personnalisées.
15
jrobichaud

Je pense que c'est le plus simple: var isPhoneGap = (location.protocol == "file:")

EDIT Pour certaines personnes qui ne fonctionnaient pas. Ensuite, vous pouvez essayer (n'avez pas testé)

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

Cela fonctionne pour moi (en cours d'exécution 1.7.0)

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

Testé sur les ordinateurs de bureau Chrome et Safari.

8
Rob

À l'instar de l'affiche originale, j'utilise le service de construction de Phonegap. Après deux jours et près de 50 versions de test, j'ai mis au point une solution élégante qui fonctionne très bien pour moi. 

Je ne pouvais pas utiliser UA sniffing parce que je voulais tester et exécuter des navigateurs mobiles. J'avais initialement choisi la technique assez fonctionnelle de cobberboy. Cela n'a pas fonctionné pour moi, car le délai/délai d'attente "howPatientAreWe: 10000" était trop gênant pour le développement dans le navigateur. Et si vous le basiez, le test en mode application/appareil échouait parfois. Il devait y avoir un autre moyen ...

Le service phonegap build nécessite que le fichier phonegap.js soit omis de votre référentiel de code avant de soumettre les fichiers de votre application au service. Par conséquent, je suis en mesure de tester son existence pour déterminer si l'exécution est effectuée dans un navigateur par rapport à une application.

Une autre mise en garde, j'utilise également jQueryMobile, de sorte que jQM et phonegap ont dû être initialisés avant que je puisse commencer un script personnalisé. Le code suivant est placé au début de mon fichier index.js personnalisé pour l'application (après jQuery, avant jQM). De plus, les documents de compilation de Phonegap indiquent de placer <script src="phonegap.js"></script> quelque part dans le code HTML. Je le laisse complètement dehors et le charge en utilisant $ .getScript () afin de tester son existence.

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!
    }
}
7
Jim H.

Fait intéressant, de nombreuses réponses, mais elles n'incluent pas ces trois options:

1 - Cordova.js définira l'objet cordova dans la portée globale. Si c'est le cas, vous utilisez probablement une étendue Cordova.

var isCordovaApp = !!window.cordova;

2 - Cordova exécutera votre application comme vous ouvririez un document HTML à partir de votre bureau. Au lieu du protocole HTTP, il utilisera FILE. Détecter cela vous donnera l’opportunité de supposer que votre application a été chargée localement.

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

3 - Utilisez l'événement load du script cordova pour détecter le contexte. Le script include peut être facilement supprimé dans le processus de construction ou le chargement du script échouera simplement dans un navigateur. Pour que cette variable globale ne soit pas définie.

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

Le crédit va à Damien Antipa d'Adobe

6
Frodik

J'utilise cette méthode:

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

debug sera true sur l'environnement du navigateur, false sur le périphérique.

5
andreszs

Cela semble être viable et je l'ai utilisé en production:

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

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

4
Deminetix

Le problème réside essentiellement dans le fait que tant que cordova.device n'est pas défini, votre code ne peut pas être sûr que ce soit parce que cordova a établi que votre appareil n'est pas pris en charge, ou s'il est toujours en train de se préparer et que des mises à jour se déclencheront plus tard. (ou troisième option: cordova n'a pas été chargé correctement).

La seule solution consiste à définir une période d'attente et à décider qu'après cette période, votre code doit supposer que le périphérique n'est pas pris en charge. J'aimerais que Cordova définisse un paramètre quelque part pour dire "Nous avons essayé de trouver un périphérique pris en charge et avons abandonné", mais il semble qu'il n'existe aucun paramètre de ce type.

Une fois que cela est établi, vous souhaiterez peut-être faire quelque chose de spécifique précisément dans les situations où aucun périphérique n'est pris en charge. Comme cacher des liens vers le marché des applications de l'appareil, dans mon cas.

J'ai reconstitué cette fonction qui devrait couvrir à peu près toutes les situations. Il vous permet de définir un gestionnaire prêt à l'emploi, un gestionnaire de périphérique jamais prêt et un temps d'attente.

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

}
3
Wytze

Une autre façon, basée sur la solution de SlavikMe:

Utilisez simplement un paramètre de requête transmis à index.html à partir de votre source PhoneGap. C'est à dire, dans Android, au lieu de

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

utilisation 

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

SlavikMe a une excellente liste sur où faire ceci sur d'autres plateformes.

Ensuite, votre index.html peut simplement faire ceci:

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

Pour ce faire, j'utilise une variable globale qui est écrasée par une version de cordova.js réservée aux navigateurs. Dans votre fichier html principal (généralement index.html), j'ai les scripts suivants qui dépendent de l'ordre:

    <script>
        var __cordovaRunningOnBrowser__ = false
    </script>
    <script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
    <script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->

Et à l'intérieur de cordova.js j'ai simplement:

__cordovaRunningOnBrowser__ = true

Cordova.js ne sera pas utilisé lors de la compilation pour un appareil mobile (mais à la place, le fichier cordova.js spécifique à la plate-forme sera utilisé). Cette méthode présente l'avantage d'être correcte à 100%, quels que soient les protocoles, les agents d'utilisateur ou la bibliothèque variables (qui peuvent changer). Il y a peut-être d'autres choses que je devrais inclure dans cordova.js, mais je ne sais pas encore ce qu'elles sont. 

3
B T

Pour conserver une base de code, l’intérêt est la "plate-forme" sur laquelle tourne le code. Pour moi, cette "plateforme" peut être trois choses différentes:

  • 0: navigateur d'ordinateur
  • 1: navigateur mobile
  • 2: conversation/Cordova

Le moyen de vérifier la plate-forme:

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

Remarque:

  • Cela doit être exécuté uniquement après que cordova.js ait été chargé (body onload (...), $ (document) .ready (...))

  • 'ontouchstart' dans document.documentElement sera présent dans les ordinateurs portables et les moniteurs de bureau dotés d'un écran tactile, ainsi un navigateur mobile, même s'il s'agit d'un bureau Il existe différentes façons de procéder à une vérification plus précise, mais je l'utilise car elle prend en charge 99% des cas dont j'ai besoin. Vous pouvez toujours remplacer cette ligne par quelque chose de plus robuste.

2
Nik

Ce n'est pas vraiment une réponse à la question, mais lorsque je teste dans un navigateur de bureau, je viens de définir une valeur localstorage pour que le navigateur charge le conflit d'application de manière permanente.

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();
    }
});
1
geon

J'ai le même problème. 

Je suis enclin à ajouter # cordova = true à l'URL chargée par le client cordova et à tester location.hash.indexOf ("cordova = true")> -1 dans ma page Web.

1
Austin France

Ce qui suit fonctionne pour moi avec le plus récent PhoneGap/Cordova (2.1.0). 

Comment ça marche:

  • Concept très simple
  • J'ai inversé la logique de certaines des solutions de délai d'expiration ci-dessus.
  • Enregistrez-vous pour l'événement device_ready (comme recommandé par la documentation PhoneGap )
    • Si l'événement n'a PAS encore été déclenché après un délai d'attente, utilisez un navigateur.
    • En revanche, les autres solutions ci-dessus reposent sur le test de certaines fonctionnalités de PhoneGap et sur la surveillance de la pause de test.

Avantages:

  • Utilise l'événement device_ready recommandé par PhoneGap.
  • L'application mobile n'a pas de délai. Dès que l'événement device_ready est déclenché, nous procédons.
  • Pas de détection d'utilisateur-agent (j'aime tester mon application en tant que site Web mobile, donc la détection de navigateur n'était pas une option pour moi). 
  • Aucune dépendance vis-à-vis des fonctionnalités/propriétés de PhoneGap non documentées (et donc fragiles).
  • Conservez votre fichier cordova.js dans votre base de code même lorsque vous utilisez un navigateur pour ordinateur de bureau ou mobile. Ainsi, cela répond à la question du PO.
  • Wytze a déclaré plus haut: "J'aimerais que Cordova définisse un paramètre quelque part pour dire" Nous avons essayé de trouver un périphérique pris en charge et avons abandonné ", mais il semble qu'il n'existe aucun paramètre de ce type." Donc, je fournis un ici.

Désavantages:

  • Les délais d'attente sont dégueulasses. Mais notre logique d'application mobile ne repose pas sur un délai; il est plutôt utilisé comme solution de rechange lorsque nous sommes en mode navigateur Web.

==

Créez un nouveau projet PhoneGap vierge. Dans l'exemple fourni index.js, remplacez la variable "app" en bas par ceci: 

var app = {
    // denotes whether we are within a mobile device (otherwise we're in a browser)
    iAmPhoneGap: false,
    // how long should we wait for PhoneGap to say the device is ready.
    howPatientAreWe: 10000,
    // id of the 'too_impatient' timeout
    timeoutID: null,
    // id of the 'impatience_remaining' interval reporting.
    impatienceProgressIntervalID: null,

    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // `load`, `deviceready`, `offline`, and `online`.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        // after 10 seconds, if we still think we're NOT phonegap, give up.
        app.timeoutID = window.setTimeout(function(appReference) {
            if (!app.iAmPhoneGap) // jeepers, this has taken too long.
                // manually trigger (fudge) the receivedEvent() method.   
                appReference.receivedEvent('too_impatient');
        }, howPatientAreWe, this);
        // keep us updated on the console about how much longer to wait.
        app.impatienceProgressIntervalID = window.setInterval(function areWeThereYet() {
                if (typeof areWeThereYet.howLongLeft == "undefined") { 
                    areWeThereYet.howLongLeft = app.howPatientAreWe; // create a static variable
                } 
                areWeThereYet.howLongLeft -= 1000; // not so much longer to wait.

                console.log("areWeThereYet: Will give PhoneGap another " + areWeThereYet.howLongLeft + "ms");
            }, 1000);
    },
    // deviceready Event Handler
    //
    // The scope of `this` is the event. In order to call the `receivedEvent`
    // function, we must explicity call `app.receivedEvent(...);`
    onDeviceReady: function() {
        app.iAmPhoneGap = true; // We have a device.
        app.receivedEvent('deviceready');

        // clear the 'too_impatient' timeout .
        window.clearTimeout(app.timeoutID); 
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        // clear the "areWeThereYet" reporting.
        window.clearInterval(app.impatienceProgressIntervalID);
        console.log('Received Event: ' + id);
        myCustomJS(app.iAmPhoneGap); // run my application.
    }
};

app.initialize();

function myCustomJS(trueIfIAmPhoneGap) {
    // put your custom javascript here.
    alert("I am "+ (trueIfIAmPhoneGap?"PhoneGap":"a Browser"));
}
1
cobberboy

Aarons, essayez 

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

Je suis tombé sur ce problème il y a plusieurs mois au début de notre application, car nous voulions aussi que l'application soit "browser-compatible" également (étant entendu que certaines fonctionnalités seraient bloquées dans ce scénario: enregistrement audio, boussole, etc.). 

La seule solution 100% (et j'insiste sur la condition de 100%) pour déterminer à l'avance le contexte d'exécution de l'application était la suivante: 

  • initialiser une variable "flag" JS sur true et la remplacer par false dans un contexte Web; 

  • par conséquent, vous pouvez utiliser un appel comme "willIBeInPhoneGapSometimesInTheNearFuture()" (c'est PRE-PG, bien sûr, vous avez encore besoin d'une méthode POST-PG pour vérifier si vous pouvez appeler des API PG, mais celle-ci est triviale). 

  • Ensuite, vous dites: "but how do you determine the execution context?"; la réponse est: "tu ne le feras pas" (parce que je ne pense pas que vous puissiez être fiable, à moins que ces brillants gens de PG le fassent dans leur code API); 

  • vous écrivez un script de construction qui le fait pour vous: une base de code avec deux variantes. 

1
Al Renaud

Aucune de ces méthodes ne fonctionne, sauf si vous supprimez le fichier Javascript PhoneGap de la version de bureau de l'application, ce qui va à l'encontre de mon objectif, qui est d'avoir une base de code.

Une autre option serait d’utiliser le dossier merges , voir la capture d’écran ci-dessous.

Vous pouvez ajouter des fichiers spécifiques à la plate-forme/remplacer ceux par défaut.

(cela devrait faire l'affaire dans certains scénarios)

enter image description here

En d'autres termes: Plutôt que de détecter le navigateur, vous n'incluez tout simplement pas certains fichiers pour la construction du bureau/attachez certains fichiers uniquement pour iOS.

1
Michal Stefanow

Détecter le navigateur de bureau même si le périphérique émuler est actif

Fonctionne sur les machines Windows et Mac. Besoin de trouver une solution pour linux View details

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
}
1
Anulal S

La solution de GeorgeW est satisfaisante, mais même sur un périphérique réel, PhoneGap.available n’est vrai que lorsque les éléments de PhoneGap ont été chargés, par exemple. onDeviceReady dans document.addEventListener ('deviceready', onDeviceReady, false) a été appelé.

Avant cela, si vous voulez savoir, vous pouvez faire comme ceci:

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

Cette solution suppose que la plupart des développeurs développent avec Chrome ou Firefox.

1
Ngoc Dao

J'essayais avec les objets window mais cela ne fonctionnait pas car j'ouvrais l'URL distante dans InAppBrowser. Impossible de le faire .. Le moyen le plus simple et le plus simple d'y parvenir était donc d'ajouter une chaîne à l'URL que vous devez ouvrir à partir de l'application phonegap. Ensuite, vérifiez si une chaîne est ajoutée à l'emplacement du document. 

Ci-dessous le code simple pour cela

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

Vous verrez qu'une chaîne est ajoutée à l'URL "#phonegap" .Alors dans l'URL du domaine, ajoutez le script suivant

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

Juste pour info, entrez PhoneGap 3.x Développement d'applications mobiles Hotshot

var userLocale = "en-US";
function startApp()
{
// do translations, format numbers, etc.
}
function getLocaleAndStartApp()
{
    navigator.globalization.getLocaleName (
        function (locale) {
            userLocale = locale.value;
            startApp();
        },
        function () {
            // error; start app anyway
            startApp();
        });
}
function executeWhenReady ( callback ) {
    var executed = false;
    document.addEventListener ( "deviceready", function () {
        if (!executed) {
            executed = true;
            if (typeof callback === "function") {
                callback();
            }
        }
    }, false);
    setTimeout ( function () {
        if (!executed) {
            executed = true;
            if (typeof callback === "function") {
                callback();
            }
        }
    }, 1000 );
};
executeWhenReady ( function() {
    getLocaleAndStartApp();
} );

et dans le cadre de YASMF

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

0
Whisher

En fait, j'ai trouvé qu'une combinaison de deux des techniques répertoriées ici fonctionnait le mieux. Premièrement, vérifiez que vous pouvez accéder à Cordova/phonegap et également vérifier si le périphérique est disponible. Ainsi:

function _initialize() {
    //do stuff
}

if (window.cordova && window.device) {
    document.addEventListener('deviceready', function () {
      _initialize();
    }, false);
} else {
   _initialize();
}
0
andyjamesdavies
if ( "device" in window ) {
    // phonegap
} else {
    // browser
}
0
Petar Vasilev

Essayez cette approche:

/**
 * 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);
        }
    });
}
0
Zorayr
if (document.URL.includes('http')) {
    // running in browser
}

Traite à la fois http et https.

0
wobsoriano

Légèrement modifié, mais fonctionne parfaitement pour moi sans aucun problème.

L'intention est de ne charger Cordova que sur un périphérique intégré, pas sur un ordinateur de bureau. J'évite donc complètement Cordova avec un navigateur d'ordinateur de bureau. Les tests et le développement de l'interface utilisateur et du MVVM sont donc très confortables.

Mettez ce code par exemple. dans le fichier 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);
}

Ensuite, au lieu d’inclure cordova, javascript inclut 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>

Facilitez votre travail! :)

0
OSP

J'utilise une combinaison de ce que GeorgeW et mkprogramming a suggéré:

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

Je suppose que d'une certaine manière, ils ne sont pas si différents, n'est-ce pas? Ha Ha ... pas drôle. Qui ne pensait pas que cela ne poserait pas de problème? Voici la solution la plus simple pour vos considérations . Transférez des fichiers différents sur votre serveur, puis faites-les sur PhoneGap . http: vérifier suggéré ci-dessus.

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

Mon intérêt est de pousser la barre de navigation des navigateurs vers le haut, donc je peux vraiment supprimer le tag du script isolé et appuyer sur rebuild [dans DW] (ils seront de toute façon un nettoyage pour le déploiement, ce qui peut être l'une de ces tâches.) Quoi qu’il en soit, j’estime que c’est une bonne option (étant donné qu’il n’ya pas grand-chose d’autre disponible) pour commenter simplement manuellement les choses avec isMobileBrowserAndNotPhoneGap lorsqu’on passe à PG) . Là encore, dans ma situation, je vais simplement supprimer l’étiquette du ) fichier qui ouvre la barre de navigation quand il s’agit d’un navigateur mobile (ce sera beaucoup plus rapide et plus petit) . [Donc, si vous pouvez isoler le code pour cette solution optimisée mais manuelle.]

0
MistereeDevlord