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コンソールでそのコードを実行すると、「hello」アラートはまだトリガーされません。何が間違っていますか?またはchrome devicereadyのような「カスタム」イベントの発生をサポートしないだけですか?
次のコードをonLoadハンドラー関数に追加します。
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
Cordova.jsでイベント "deviceready"が発生するため、アプリケーションコードでこのイベントの存在を検出する方法がわかりません。
StopGapコードを引き出し、わずかな遅延を導入しなければならなくなりました(このコードをページ固有のコードとは別のスクリプトで実行する必要があります)。
window.setTimeout(function() {
var e = document.createEvent('Events');
e.initEvent("deviceready", true, false);
document.dispatchEvent(e);
}, 50);
Ripple Mobile Emulatorを使用します。 Chrome Web Storeで無料です。インストールしたら、テストするページに移動し、ページを右クリックして[Ripple Mobile Emulator]> [有効にする]を選択します。 PhoneGap。
エミュレータは優れていますが、まだベータ版であるため、すべてがまだ実装されているわけではありません。
Ad @ m
私のモバイルサイトとモバイルアプリでは、jQueryで次のコードを使用しています。
function init() { ... };
if ("cordova" in window) {
$(document).on("deviceready", init);
} else {
$(init);
}
デバッグに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()
}
user318696には私が探していた魔法がありました。 「デバイス」はCordovaで定義され、ブラウザー(non-phoneGapアプリラッパー)で定義されません。
編集済み:
Cordovaがデバイスで初期化するのにかなり時間がかかり、ここでの「元の」答えが無効になったシナリオに遭遇しました。ブラウザーでテストを実行するときに、URLにパラメーターを要求することに移行しました。 (この例では、元のページのURLで「testing =」を探しています)
$(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();
}
});
user318696のwindow.device検出はうまく機能します。 Kendo UI MobileとPhoneGapを使用している場合、次のスクリプトはPhoneGapビルドとWebブラウザーの両方の機能を有効にします。これは、Burke Hollandの PhoneGap Build Bootstrap Project for 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の提案の強化。次のコードは、navigator.userAgent文字列を使用して、クライアントブラウザーがモバイルプラットフォーム上にあるかどうかを一般的に判断します。
デスクトップブラウザーから分離する目的は、コンパイル/インストールの前にコードを検証できるようにすることです。Android apkなど)。 EclipseとAndroidでの読み込み:別の追加のボーナスは、1つのタブでweinreを使用し、別のタブでAndroidアセットからのindex.htmlを使用(およびfirebugを使用)する機能です。
PS:プライベートVPS情報とUUIDがあるため、weinreコードは除外されます。
tHX!
<!-- 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>