JQuery document.ready与Phonegap deviceready
我正在用jQuery制作一个phonegap应用程序。 我很困惑,是否应该将我的整个代码包装在JQuery的$(document).ready()
$(document).ready(function(){ //mycode });
或者在phonegap的deviceready事件里面
document.addEventListener("deviceready", function(){ //mycode });
我目前正在使用document.ready
但我想我可能会遇到问题,如果我尝试访问document.ready
一些Phonegap API方法。
哪个是最好的事件来包装我的代码,document.ready或deviceready?
您应该使用deviceready事件来避免有趣的事情发生。
文档状态:
这是每个PhoneGap应用程序都应该使用的非常重要的事件。
PhoneGap包含两个代码库:native和JavaScript。 在加载本机代码的同时,显示自定义加载图像。 但是,只有在DOM加载后才会加载JavaScript。 这意味着您的Web应用程序可能会在加载之前调用PhoneGap JavaScript函数。
一旦PhoneGap完全加载,PhoneGap deviceready事件就会触发。 设备启动后,您可以安全地拨打PhoneGapfunction。
通常情况下,一旦加载了HTML文档的DOM,就需要在document.addEventListener
附加一个事件监听器。
请阅读以下文档: http : //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
答案中的一个关键点是deviceready
事件文档中的这一行。
这个事件的行为与其他事件的不同之处在于,在事件被触发后注册的任何事件处理程序将具有立即调用的callback函数。
这意味着如果在事件被触发之后添加了一个侦听器,则不会“错过”该事件。
所以,首先将所有的初始化代码移动到onDeviceReady函数。 然后先处理document.ready。 在document.ready中,如果您确定您正在浏览器中运行,只需调用onDeviceReady函数,否则添加deviceready监听器。 这种方式,当你在onDeviceReady函数中,你确定所有需要的“准备”已经发生。
$(document).ready(function() { // are we running in native app or in a browser? window.isphone = false; if(document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true; } if( window.isphone ) { document.addEventListener("deviceready", onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { // do everything here. }
isphone检查工作,因为在phonegap中,index.html使用file:///
url加载。
他们不一样。
jQuery.ready()正在使用:
document.addEventListener("DOMContentLoaded", yourCallbackFunction, false);
来源: https : //code.jquery.com/jquery-3.1.1.js
Cordova / PhoneGap指导您使用:
document.addEventListener("deviceready", yourCallbackFunction, false);
来源: https : //cordova.apache.org/docs/en/latest/cordova/events/events.html
我的build议是,你把你的Cordova / PhoneGap插件的所有初始化代码放在callback函数中,当deviceready
事件发生的时候触发。 例:
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // Now safe to use device APIs }
@ Kinjal的回答确实帮助我走上了正轨,但是我必须在时间上解决很多问题。
我使用Cordova设备就绪事件来读取我的应用程序的数据文件,几个JSON数据包驱动接口构build,并默认加载到www文件夹中,但最终可能会从服务器下载,以升级应用程序数据库。
我发现了很多问题,因为应用程序数据结构在路由启动之前没有足够的时间进行初始化。
我解决了这个解决scheme:首先初始化jQuery,在jQuery初始化结束时调用Cordova的事件处理程序,在Cordova初始化的最后处理结束时调用应用程序启动例程。
所有这些噩梦开始了,因为我需要一种方法来读取Hogan.js的模板文件,并且无法用文件协议和一个简单的XHR读取它们。
喜欢这个:
$(document).ready(function () { ... // are we running in native app or in a browser? window.isphone = false; if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) { window.isphone = true; } if (window.isphone) { document.addEventListener('deviceready', onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { function readFromFile(fileName, cb) { // see (https://www.neontribe.co.uk/cordova-file-plugin-examples/) } ... readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) { app.views.lastview = data; app.start(); }); }
我正在使用PhoneGap Build cli-6.2.0,当我testing你所build议的程序是不会在函数onDeviceReady()
做任何事情。
随着旧版本的PGB,它的工作原理!
$(document).ready(function() { window.isphone = false; if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true } if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { alert( window.isphone ); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>