Как запустить событие deviceready в браузере Chrome (при попытке отладить проект phonegap)

Question

Я занимаюсь разработкой приложения PhoneGap и хотел бы иметь возможность отлаживать его в Chrome, а не на телефоне. Однако я выполняю инициализацию моего кода в функции onDeviceReady (), которая запускается, когда PhoneGap запускает событие «deviceready». Поскольку Chrome не запускает это событие, мой код никогда не инициализируется.

Вот урезанная версия моего кода:

var dashboard = {};

$(document).ready(function() {
    document.addEventListener("deviceready", dashboard.onDeviceReady, false);
}); 

dashboard.onDeviceReady = function() {
    alert("hello!"); //this is never fired in Chrome
};

Я пытался использовать код StopGap , который в основном выполняет следующие действия:

var e = document.createEvent('Events'); 
e.initEvent("deviceready");
document.dispatchEvent(e);

Но когда я запускаю этот код в консоли Chrome javascript, предупреждение «привет» все равно не срабатывает. Что я делаю неправильно? Или chrome просто не поддерживает запуск "пользовательских" событий, таких как deviceready?

Answer 1

Добавьте этот код в функцию обработчика onLoad:

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

Событие «deviceready» запускается в cordova.js, поэтому я не знаю, как определить наличие этого события в коде приложения.

Answer 2

Закончилось вытягиванием кода StopGap и введением небольшой задержки (этот код должен выполняться в отдельном скрипте, нежели код для конкретной страницы):

window.setTimeout(function() {
    var e = document.createEvent('Events'); 
    e.initEvent("deviceready", true, false); 
    document.dispatchEvent(e);
}, 50);

Answer 3

Используйте мобильный эмулятор Ripple. Это бесплатно в Интернет-магазине Chrome. Когда он установлен, перейдите на страницу, на которой вы хотите его протестировать, щелкните правой кнопкой мыши страницу и выберите Ripple Mobile Emulator> Включить. При появлении запроса выберите PhoneGap.

Эмулятор хорош, но он все еще находится в бета-версии, поэтому еще не все реализовано.

Ad @ м

Answer 4

Для моего мобильного сайта и мобильного приложения я использую следующий код с jQuery:

function init() { ... };
if ("cordova" in window) {
    $(document).on("deviceready", init);
} else {
    $(init);
}

Answer 5

Я использую Safari для отладки и делаю это:

//my standard PG device ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//debug("onDeviceReady")
getDefaultPageSetup();

}

//then add this (for safari
window.onload = function () {
if(! window.device)
    onDeviceReady()
}

Answer 6

user318696 обладал магией, которую я искал.«устройство» определено в cordova и не определяется в браузере (не обертка приложения phoneGap).

РЕДАКТИРОВАНИЕ:

Я столкнулся со сценарием, в котором Кордова довольно долгоинициализировать на устройстве, и «оригинальный» ответ здесь больше не действителен.Я перешел к требованию параметра в URL при запуске тестов в браузере.(в примере я ищу "testing =" в URL-адресе исходной страницы)

$(document).ready(function () {

    // ALWAYS LISTEN
    document.addEventListener("deviceready", main, false);

    // WEB BROWSER
    var url = window.location.href;
    if ( url.indexOf("testing=") > -1 ) {
        setTimeout(main, 500);
    }

});

ОРИГИНАЛ:

Я не выкопал достаточно глубоко, чтобы знать, как долгодоверяйте этому [они могли бы начать определять «устройство» в браузере в будущем выпуске?] Но по крайней мере до 2.6.0 это безопасно:

$(document).ready(function () {
    // call main from Cordova
    if ( window.device ) {
        document.addEventListener("deviceready", main, false);
    }

    // from browser
    else {
        main();
    }
});

Answer 7

Обнаружение window.device user318696 работает хорошо.При использовании Kendo UI Mobile и PhoneGap следующий скрипт включит функциональность как в сборках PhoneGap, так и в веб-браузерах.Он основан на проекте начальной загрузки Burke Holland PhoneGap для Kendo UI Mobile и предназначен для размещения внизу страницы перед закрывающим тегом тела.

    <script type="text/javascript">
    var tkj = tkj || {};

    tkj.run = (function () {
        // create the Kendo UI Mobile application
        tkj.app = new kendo.mobile.Application(document.body);
    });

    // this is called when the intial view shows. it prevents the flash of unstyled content (FOUC)
    tkj.show = (function () {
        $(document.body).show();
    });

    (function () {
        if (!window.device) {
            //initialize immediately for web browsers
            tkj.run();
        }
        else if (navigator.userAgent.indexOf('Browzr') > -1) {
            // blackberry
            setTimeout(tkj.run, 250)
        } else {
            // attach to deviceready event, which is fired when phonegap is all good to go.
            document.addEventListener('deviceready', tkj.run, false);
        }
    })();
    </script>

Answer 8

Вы моделируете такие события:

const simulateEvent = (eventName, attrs = {customData:"data"}, time = 1000, target = document) => {
    let event = new CustomEvent(eventName, { detail:  attrs });    
    setTimeout(() => {
        target.dispatchEvent(event);
    }, time);
};

var divReady = document.querySelector('div#ready');

document.addEventListener('deviceready', (e) => {
 console.log("triggered with:", e.detail);
 divReady.innerHTML = `Ready! ${JSON.stringify(e.detail)}`;
});

simulateEvent('deviceready', {customData:"My custom data goes in event.detail"});

<div id="ready"> Wait for ready... </div>

Answer 9

Улучшение химического предложения. Следующий код использует строку navigator.userAgent для общего определения, находится ли клиентский браузер на мобильной платформе.

Цель отделения от настольных браузеров состоит в том, чтобы разрешить проверку кода перед компиляцией / установкой Android apk и т. Д. Гораздо быстрее сделать быстрое изменение кода, обновить браузер рабочего стола по сравнению со сборкой в ​​Eclipse и загрузкой на Android. Еще одним дополнительным бонусом является возможность использовать weinre на одной вкладке и index.html из ресурсов Android на другой вкладке (и использовать firebug).

PS: код weinre исключен, поскольку он содержит мою личную информацию VPS и UUID.

ТНХ!

<!-- Framework:jQuery -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.2, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" >
<link  href="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css" type="text/css" media="screen" rel="stylesheet" title="JQuery Mobile">
<script src="./framework/jquery/jquery-1.8.2.min.js"></script>
<script src="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<!-- Framework:Weinre -->

<!-- Framework:PhoneGap -->
<script src="./framework/phonegap/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var mobile = false;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
        document.addEventListener("deviceready", function(){mobile = true; onDeviceReady();}, false);
    } else {
        $(document).ready(onDeviceReady);   
    }
    function onDeviceReady() {
        setEvents();
        test();
        if (mobile) {
            navigator.notification.alert("Debugging-ready for\n" + navigator.userAgent);
        } else {
            alert("Debugging-ready for\n" + navigator.userAgent);
        }
    };
</script>