web-dev-qa-db-fra.com

JQuery document.ready vs Phonegap deviceready

Je fais une application phonegap avec jQuery. Je ne sais pas si je dois insérer tout mon code dans la fonction $(document).ready() de JQuery, comme

$(document).ready(function(){
    //mycode
});

ou à l'intérieur de l'événement deviceready de Phonegap comme

document.addEventListener("deviceready", function(){
    //mycode
});

J'utilise actuellement document.ready, mais je risque de rencontrer des problèmes si j'essaie d'accéder à certaines méthodes de l'API Phonegap dans document.ready.

Quel est le meilleur événement pour intégrer mon code dans document.ready ou deviceready?

javascriptjquerycordova
66
ajaybc

Vous devriez utiliser l'événement deviceready pour éviter que de drôles de choses ne se produisent.

L'état de la documentation:

C’est un événement très important que toutes les applications PhoneGap doivent utiliser.

PhoneGap est composé de deux bases de code: natif et JavaScript. Pendant le chargement du code natif, une image de chargement personnalisée est affichée. Cependant, JavaScript n'est chargé qu'une fois le DOM chargé. Cela signifie que votre application Web pourrait éventuellement appeler une fonction JavaScript PhoneGap avant son chargement.

L'événement PhoneGap deviceready se déclenche une fois que PhoneGap est complètement chargé. Une fois l'appareil allumé, vous pouvez appeler en toute sécurité la fonction PhoneGap.

En règle générale, vous souhaiterez attacher un écouteur d'événement avec document.addEventListener une fois que le DOM du document HTML a été chargé.

Lisez la documentation ici: http://docs.phonegap.com/fr/1.0.0/phonegap_events_events.md.html

27
AbdulFattah Popoola

Un élément clé de la réponse est la ligne figurant dans documentation de l’événement deviceready.

Cet événement se comporte différemment des autres en ce sens que la fonction de rappel de tout gestionnaire d’événement enregistré après le déclenchement de l’événement est appelée immédiatement.

Cela signifie que vous ne manquerez pas l'événement si vous ajoutez un écouteur après le déclenchement de l'événement.

Donc, déplacez d'abord tout le code d'initialisation vers la fonction onDeviceReady. Ensuite, manipulez d'abord le document.ready. Dans le document.ready si vous déterminez que vous utilisez un navigateur, appelez simplement la fonction onDeviceReady, sinon ajoutez le programme d'écoute deviceready. De cette façon, lorsque vous utilisez la fonction onDeviceReady, vous êtes certain que tous les "prêts" nécessaires ont été effectués.

$(document).ready(function() {
    // are we running in native app or in a browser?
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;
    }

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady() {
    // do everything here.
}

La vérification isphone fonctionne car dans phonegap, le fichier index.html est chargé à l'aide d'une URL file:///.

86
Kinjal Dixit

Ils ne sont pas les mêmes.

jQuery.ready () utilise:

document.addEventListener("DOMContentLoaded", yourCallbackFunction, false);

Source: https://code.jquery.com/jquery-3.1.1.js

Cordova/PhoneGap vous demande d'utiliser:

document.addEventListener("deviceready", yourCallbackFunction, false);

Source: https://cordova.Apache.org/docs/fr/latest/cordova/events/events.html

Ma suggestion est que vous insériez tout le code d'initialisation de vos plug-ins Cordova/PhoneGap dans la fonction de rappel déclenchée lorsque l'événement deviceready se produit. Exemple:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}
1
JedatKinports

La réponse de @ Kinjal m'a vraiment aidé à me mettre sur la bonne voie, mais j'ai dû lutter contre de nombreux problèmes de timing.

J'utilise Cordova Device Ready Event pour lire les fichiers de données de mon application, quelques paquets JSON qui pilotent la construction de l'interface et sont chargés par défaut dans le dossier www, mais peuvent éventuellement être téléchargés à partir d'un serveur afin de mettre à niveau la base de données de l'application.

J'ai constaté de nombreux problèmes car les structures de données de l'application n'avaient pas suffisamment de temps pour s'initialiser avant le démarrage du routage.

Je me suis retrouvé avec cette solution: initialisez d'abord jQuery, appelez le gestionnaire d'événements de Cordova à la fin de l'initialisation de jQuery, appelez la routine de démarrage de l'application à la fin du dernier traitement de l'initialisation de Cordova.

Tout ce cauchemar a commencé parce que j'avais besoin d'un moyen de lire les fichiers de modèle pour Hogan.js et que je ne pouvais pas les lire avec le protocole de fichier et un simple XHR.

Comme ça:

$(document).ready(function () {

    ...

    // are we running in native app or in a browser?
    window.isphone = false;
    if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
        window.isphone = true;
    }

    if (window.isphone) {
        document.addEventListener('deviceready', onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady() {
    function readFromFile(fileName, cb) {
        // see (https://www.neontribe.co.uk/cordova-file-plugin-examples/)
    }

    ...

    readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) {
        app.views.lastview = data;
        app.start();
    });
}
0
mico

J'utilise PhoneGap Build cli-6.2.0 et lorsque je teste la procédure suggérée, il ne fait rien dans la fonction onDeviceReady().

Avec les anciennes versions de PGB, cela fonctionne!

	$(document).ready(function() { 
		window.isphone = false;
		if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true }
		if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); }
	});
	function onDeviceReady() {
		alert( window.isphone ); 		
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
user6796773

L'un ne doit pas exclure l'autre. Un exemple simple:

$(document).on('deviceready', function() {
    console.log('event: device ready');
    $(document).on('pause', function() {
        console.log('event: pause');
    });
    $(document).on('resume', function() {
        console.log('event: resume');
    });
});
0
Martin Zeitler