Документ JQuery.готов против PhoneGap и функция deviceready сработала

я делаю приложение phonegap с помощью jquery. Я смущен, должен ли я обернуть весь свой код внутри JQuery $(document).ready() как

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

или внутри события deviceready phonegap как

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

в настоящее время я использую document.ready но я думаю, что я могу столкнуться с проблемами, если я попытаюсь получить доступ к некоторым методам Phonegap API внутри document.ready.

который является лучшим событием, чтобы обернуть мой код в документ.готовый или функция deviceready сработала?

5 64
javascript jquery cordova

5 ответов:

вы должны использовать событие deviceready, чтобы избежать смешных вещей.

государственные документы:

Это очень важное событие, которое должно использовать каждое приложение PhoneGap.

PhoneGap состоит из двух кодовых баз: native и JavaScript. Во время загрузки собственного кода отображается пользовательское изображение загрузки. Однако JavaScript загружается только после загрузки DOM. Это означает, что ваше веб-приложение может потенциально вызвать PhoneGap Функция JavaScript, прежде чем он будет загружен.

событие PhoneGap deviceready срабатывает после полной загрузки PhoneGap. После запуска устройства вы можете безопасно совершать вызовы функции PhoneGap.

как правило, вы хотите, чтобы прикрепить прослушиватель событий с document.addEventListener после загрузки DOM HTML-документа.

прочитайте документацию здесь:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

26

ключевым моментом в ответе является эта строка из документация на deviceready событие.

это событие ведет себя иначе, чем другие в том, что любой обработчик событий, зарегистрированный после того, как событие было запущено, немедленно вызовет свою функцию обратного вызова.

это означает, что вы не пропустите событие, если вы добавите слушателя после того, как событие было запущено.

Итак, сначала переместите весь код инициализации в функция onDeviceReady. Затем сначала обработайте документ.готовый. Внутри документа.если вы определяете, что вы работаете в браузере, просто вызовите функцию onDeviceReady, в противном случае добавьте прослушиватель deviceready. Таким образом, когда вы находитесь в функции onDeviceReady, вы уверены, что все необходимые "готовые" произошли.

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

проверка isphone работает, потому что в phonegap, индекс.html загружается с помощью file:/// url.

84

они не то же самое.

jQuery.готов() использует:

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

Источник:https://code.jquery.com/jquery-3.1.1.js

Cordova / PhoneGap инструктирует вас использовать:

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

Источник:https://cordova.apache.org/docs/en/latest/cordova/events/events.html

мое предложение заключается в том, что вы помещаете весь код инициализации для своих плагинов Cordova / PhoneGap внутри функции обратного вызова, которая запускается когда deviceready событие происходит. Пример:

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

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

ответ@Kinjal действительно помог мне встать на путь, но мне пришлось бороться с множеством проблем со временем.

Я использую событие Cordova device ready для чтения файлов данных для моего приложения, несколько пакетов JSON, которые создают интерфейс диска и загружаются по умолчанию внутри папки www, но в конечном итоге могут быть загружены с сервера для обновления базы данных приложения.

Я нашел много проблем, потому что структуры данных приложения не было достаточно времени для инициализации перед началом маршрутизации.

Я закончил с этим решением: сначала инициализируйте jQuery, вызовите обработчик событий Cordova в конце инициализации jQuery, вызовите процедуру запуска приложения в конце последней обработки в инициализации Cordova.

весь этот кошмар начался, потому что мне нужен был способ читать файлы шаблонов для Хогана.js так и не смог прочитать их с помощью файлового протокола и простого XHR.

такой:

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

Я использую PhoneGap Build cli-6.2.0 и когда я тестирую процедуру, которую вы предложили, это ничего не делает внутри функции onDeviceReady().

С более старыми версиями PGB это работает!

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