Как запустить событие deviceready в браузере Chrome (попытка отладки проекта phonegap)
Я разрабатываю приложение 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
};
Я пробовал использовать временное код, который в основном выполняет следующее:
var e = document.createEvent('Events');
e.initEvent("deviceready");
document.dispatchEvent(e);
но когда я запускаю этот код в консоли Chrome javascript, предупреждение "hello" все еще не запускается. Что я делаю не так? Или chrome просто не поддерживает запуск "пользовательских" событий, таких как deviceready?
9 ответов:
добавьте этот код в функцию обработчика onLoad:
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", onDeviceReady, false); } else { onDeviceReady(); }событие "deviceready" запускается в Кордове.js поэтому я не знаю способа обнаружить существование этого события в коде приложения.
в конечном итоге вытащил код StopGap и должен был ввести крошечную задержку (этот код работает в отдельном скрипте, чем код для конкретной страницы):
window.setTimeout(function() { var e = document.createEvent('Events'); e.initEvent("deviceready", true, false); document.dispatchEvent(e); }, 50);
используйте эмулятор Ripple Mobile. Это бесплатно в интернет-магазине Chrome. Когда он будет установлен, перейдите на страницу, на которой вы хотите его протестировать, щелкните правой кнопкой мыши страницу и выберите Ripple Mobile Emulator > включить. При появлении запроса выберите PhoneGap.
эмулятор хорош, но он все еще находится в бета-версии, поэтому еще не все реализовано.
Ad@m
Я использую 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() }
для моего мобильного сайта и мобильного приложения, я использую следующий код с помощью jQuery:
function init() { ... }; if ("cordova" in window) { $(document).on("deviceready", init); } else { $(init); }
у пользователя 318696 была магия, которую я искал. "устройство" определяется в cordova и не определяется в браузере (не-phoneGap app wrapper).
редактировать:
я столкнулся со сценарием, когда Кордова заняла довольно много времени для инициализации на устройстве, и" оригинальный " ответ здесь больше не действителен. Я перешел к требованию параметра на 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(); } });
Окно пользователя 318696.устройство работает хорошо. При использовании Kendo UI Mobile и PhoneGap, следующий сценарий будет включать функциональность как в сборках PhoneGap, так и в веб-браузерах. Это основано на Берке Холланде PhoneGap Build Bootstrap Project для Kendo UI Mobile и предназначено для размещения в нижней части страницы, перед закрывающим тегом body.
<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>
повышение предложения Chemik. В следующем коде используется навигатор.строка userAgent для общего определения того, находится ли клиентский браузер на мобильной платформе.
цель отделения от настольных браузеров-разрешить проверку кода перед компиляцией / установкой Android apk и т. д. Это гораздо быстрее, чтобы сделать быстрое изменение кода, обновить браузер рабочего стола против компиляции в eclipse и загрузки на android. Еще одним дополнительным бонусом является возможность использовать weinre в одной вкладке и индекс.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>
вы имитируете такие события:
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>
Comments