JQuery document.ready vs Phonegap deviceready

Ответ 1

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

Состояние документов:

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

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

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

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

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

Ответ 2

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

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

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

Итак, сначала переместите весь код инициализации в функцию onDeviceReady. Затем сначала обработайте document.ready. В документе. Если вы определили, что работаете в браузере, просто вызовите функцию 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.
}

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

Ответ 3

Они не совпадают.

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

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
}

Ответ 4

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

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

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

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

Весь этот кошмар начался, потому что мне нужен был способ прочитать файлы шаблонов для Hogan.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();
    });
}

Ответ 5

Я использую 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>

Ответ 6

Одно не должно исключать другое. Один простой пример:

$(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');
    });
});