首页 文章

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

提问于
浏览 次
58

我正在开发一个PhoneGap应用程序，我希望能够在Chrome中而不是在手机上调试它 . 但是，我在onPviceReady（）函数中初始化我的代码，该函数在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不支持触发像设备准备的“自定义”事件？

javascript google-chrome cordova

9 回答

  • 13

    对于我的移动网站和移动应用程序，我使用以下代码与jQuery：

    function init() { ... };
if ("cordova" in window) {
    $(document).on("deviceready", init);
} else {
    $(init);
}
    回复于
  • 3

    我使用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()
}
    回复于
  • 7

    将此代码添加到onLoad处理函数：

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

    事件“deviceready”在cordova.js中被触发，所以我不知道在应用程序代码中检测此事件是否存在的方法 .

    回复于
  • 70

    结束了拔出StopGap代码并引入了一个小延迟（让代码在一个单独的脚本中运行，而不是特定于页面的代码）：

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

    使用Ripple移动仿真器 . 它在Chrome网上应用店中免费提供 . 安装后，导航到要测试它的页面，右键单击页面并选择Ripple Mobile Emulator> Enable . 出现提示时，选择PhoneGap .

    模拟器很好，但它仍处于测试阶段，因此尚未实现所有功能 .

    广告@米

    回复于
  • 7

    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);
    }

});

    原版的：

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

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

    // from browser
    else {
        main();
    }
});
    回复于
  • 4

    user318696 's window.device detection works well. If using Kendo UI Mobile and PhoneGap, the following script will enable functionality in both PhoneGap builds and web browsers. This is based on Burke Holland' s 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>
    回复于
  • 1

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

    与桌面浏览器分离的目的是允许在编译/安装android apk等之前验证代码 . 快速进行代码更改，刷新桌面浏览器与在eclipse中编译和在android上加载要快得多 . 另一个额外的好处是能够在一个选项卡中使用weinre，在另一个选项卡中使用来自android资产的index.html（并使用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>
    回复于
  • 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>
    回复于

相关问题