it-swarm.com.de

JQuery document.ready vs Phonegap-Gerät

Ich mache eine Phonegap-Anwendung mit Jquery. Ich bin verwirrt, ob ich meinen gesamten Code innerhalb von $(document).ready() von JQuery einpacken soll

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

oder innerhalb des geräteinternen Ereignisses von Phonegap

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

Ich verwende derzeit document.ready, aber ich denke, ich kann Probleme bekommen, wenn ich versuche, auf einige Phonegap API-Methoden in document.ready zuzugreifen.

Welches ist die beste Veranstaltung, um meinen Code in document.ready oder deviceready einzuhüllen?

66
ajaybc

Sie sollten das Geräteereignis verwenden, um zu vermeiden, dass lustige Dinge passieren.

Die Dokumente geben an:

Dies ist ein sehr wichtiges Ereignis, das jede PhoneGap-Anwendung verwenden sollte.

PhoneGap besteht aus zwei Codebasen: native und JavaScript. Während der native Code geladen wird, wird ein benutzerdefiniertes Ladebild angezeigt. JavaScript wird jedoch nur geladen, wenn das DOM geladen wird. Dies bedeutet, dass Ihre Webanwendung möglicherweise eine PhoneGap-JavaScript-Funktion aufrufen kann, bevor sie geladen wird.

Das PhoneGap-Geräteereignisereignis wird ausgelöst, wenn PhoneGap vollständig geladen ist. Nachdem das Gerät ausgelöst wurde, können Sie die PhoneGap-Funktion sicher anrufen.

Normalerweise möchten Sie einen Ereignislistener mit document.addEventListener anhängen, nachdem das DOM des HTML-Dokuments geladen wurde.

Lesen Sie die Dokumentation hier: http://docs.phonegap.com/de/1.0.0/phonegap_events_events.md.html

27

Ein Schlüsselpunkt in der Antwort ist diese Zeile aus der documentation des deviceready-Ereignisses.

Dieses Ereignis verhält sich anders als andere Ereignisse, da bei jedem Ereignishandler, der nach dem Auslösen des Ereignisses registriert wurde, die Callback-Funktion sofort aufgerufen wird.

Dies bedeutet, dass Sie das Ereignis nicht verpassen, wenn Sie einen Listener hinzufügen, nachdem das Ereignis ausgelöst wurde.

Verschieben Sie also zunächst den gesamten Initialisierungscode in die Funktion onDeviceReady. Dann behandeln Sie zuerst das Dokument. Wenn Sie in document.ready feststellen, dass Sie in einem Browser ausgeführt werden, rufen Sie einfach die Funktion onDeviceReady auf. Andernfalls fügen Sie den Geräte-Listener hinzu. Wenn Sie sich in der onDeviceReady-Funktion befinden, können Sie sicher sein, dass alle erforderlichen Vorbereitungen getroffen wurden.

$(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.
}

Die isphone-Prüfung funktioniert, da in phonegap die index.html mit einem file:///-url geladen wird.

86
Kinjal Dixit

Sie sind nicht gleich.

jQuery.ready () verwendet:

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

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

Cordova/PhoneGap weist Sie an, Folgendes zu verwenden:

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

Quelle: https://cordova.Apache.org/docs/de/latest/cordova/events/events.html

Mein Vorschlag ist, dass Sie den gesamten Initialisierungscode für Ihre Cordova/PhoneGap-Plugins in die Rückruffunktion einfügen, die ausgelöst wird, wenn das Ereignis deviceready auftritt. Beispiel:

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

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

Die Antwort von @ Kinjal hat mir wirklich geholfen, auf den richtigen Weg zu kommen, aber ich hatte viele Probleme mit dem Timing.

Ich verwende das Cordova-Gerätereignis, um Datendateien für meine App zu lesen. Einige JSON-Pakete, die die Erstellung von Schnittstellen vorantreiben und standardmäßig im Ordner www geladen werden. Möglicherweise werden sie jedoch von einem Server heruntergeladen, um die Anwendungsdatenbank zu aktualisieren.

Ich habe viele Probleme gefunden, weil die Anwendungsdatenstrukturen nicht genug Zeit hatten, um zu initialisieren, bevor das Routing gestartet wurde.

Ich habe diese Lösung gefunden: Initialisieren Sie zunächst jQuery, rufen Sie den Event-Handler von Cordova am Ende der jQuery-Initialisierung auf, rufen Sie die Anwendungsstartroutine am Ende der letzten Verarbeitung in der Cordova-Initialisierung auf.

Der ganze Albtraum begann, weil ich eine Möglichkeit brauchte, Schablonendateien für Hogan.js zu lesen, und ich konnte sie nicht mit dem Dateiprotokoll und einem einfachen XHR lesen.

So was:

$(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

Ich verwende PhoneGap Build cli-6.2.0 und wenn ich die von Ihnen vorgeschlagene Prozedur teste, führt dies nichts in der Funktion onDeviceReady() aus.

Mit älteren PGB-Versionen funktioniert es!

	$(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

Das eine muss das andere nicht ausschließen. Ein einfaches Beispiel:

$(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