如何在Chrome浏览器中启动deviceready事件（尝试debuggingphonegap项目）
我正在开发一个PhoneGap应用程序，我希望能够在Chrome中而不是在手机上进行debugging。 但是，在PhoneGap触发“deviceready”事件时，会触发onDeviceReady（）函数来初始化我的代码。 由于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(); }
事件“deviceready”在cordova.js中触发，所以我不知道在应用程序代码中检测是否存在此事件。
最终拉出StopGap代码，并引入一个微小的延迟（这个代码运行在一个单独的脚本比特定的页面代码）：
window.setTimeout(function() { var e = document.createEvent('Events'); e.initEvent("deviceready", true, false); document.dispatchEvent(e); }, 50);
使用纹波移动模拟器。 它在Chrome网上应用店中免费。 安装完成后，导航到要testing的页面，右键单击页面，然后selectRipple Mobile Emulator>启用。 出现提示时，请selectPhoneGap。
模拟器是好的，但它仍然在testing阶段，所以并不是所有的东西都已经实现了。
广告@米
我使用Safari进行debugging，并执行此操作：
//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); }
user318696有我正在寻找的魔法。 “设备”是在cordova中定义的，在浏览器（非phoneGap应用程序包装）中没有定义。
编辑：
我遇到了一个情况，cordova花了很长时间来初始化一个设备，这里的“原始”答案不再有效。 在浏览器中运行testing时，我已经转向要求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); } });
原版的：
我还没有深入到足以知道多久才能相信这个[他们可以在未来的版本中开始在浏览器中定义“设备”吗？]但至less高达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浏览器中启用function。 这是基于Burke Holland的用于Kendo UI Mobile的PhoneGap Build Bootstrap项目，旨在将其放置在页面底部的closures主体标签之前。
<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>
加强Chemikbuild议。 以下代码使用navigator.userAgentstring来一般性地确定客户端浏览器是否在移动平台上。
从桌面浏览器分离的目的是为了在编译/安装Android apk之前允许代码validation。快速更改代码，刷新桌面浏览器与在eclipse中编译和在android上加载相比要快得多。 另一个额外的好处是能够使用weinre在一个选项卡和从另一个选项卡（并使用萤火虫）Android资产的index.html。
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>
