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控制台中运行该代码时，“hello”警报仍然不会触发。我究竟做错了什么？或者Chrome不支持触发像“设备准备”这样的“自定义”事件吗？

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＆gt;启用。出现提示时，选择PhoneGap。

模拟器很好，但它仍然处于测试阶段，所以并非所有内容都已实现。

广告@米

Answer 4

我使用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 5

对于我的移动网站和移动应用，我在jQuery中使用以下代码：

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

Answer 6

user318696有我想要的魔力。 “device”在cordova中定义，并且在浏览器（非phoneGap app包装器）中未定义。

编辑：

我遇到了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);
    }

});

ORIGINAL：

我还没有深入挖掘知道多长时间才能相信这个[他们可以在未来的版本中开始在浏览器中定义“设备”吗？]但至少高达2.6.0这是安全的：

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

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

Answer 7

user318696的window.device检测效果很好。如果使用Kendo UI Mobile和PhoneGap，以下脚本将在PhoneGap构建和Web浏览器中启用功能。这是基于Burke Holland的PhoneGap Build Bootstrap Project for 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

加强Chemik的建议。以下代码使用navigator.userAgent字符串来一般性地确定客户端浏览器是否在移动平台上。

与桌面浏览器分离的目的是允许在编译/安装android apk等之前验证代码。快速更改代码，刷新桌面浏览器与在eclipse中编译和在android上加载要快得多。另一个额外的好处是能够在一个选项卡中使用weinre＆amp;来自另一个标签中的android资产的index.html（并使用firebug）。

PS：我们的代码被排除在外，因为它有我的私人VPS信息＆amp; UUID。

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>

Answer 9

你模拟这样的事件：

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>

如何在Chrome浏览器中触发deviceready事件（尝试调试phonegap项目）

9 个答案: