JQuery document.ready 与 Phonegap deviceready

IT技术 javascript jquery cordova
2021-02-12 07:46:50

我正在用 jquery 制作一个 phonegap 应用程序。我很困惑我是否应该换我整个里面的代码jQuery的$(document).ready()

$(document).ready(function(){
    //mycode
});

或在 phonegap 的 deviceready 事件中,例如

document.addEventListener("deviceready", function(){
    //mycode
});

我目前正在使用,document.ready但我认为如果我尝试访问document.ready.

将我的代码包装在 document.ready 或 deviceready 中的最佳事件是哪个?

6个回答

答案的一个关键点是事件文档中的这一行deviceready

此事件的行为与其他事件不同,因为在事件触发后注册的任何事件处理程序都将立即调用其回调函数。

这意味着如果在触发事件后添加侦听器,则不会“错过”该事件。

因此,首先将所有初始化代码移至 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加载的

@SubjectiveEffect 很可能您正在使用 file:/// url 打开 html,即通过双击文件管理器中的 html 文件。
2021-03-15 07:46:50
这个答案对我帮助很大。
2021-03-21 07:46:50
我也喜欢这个解决方案。在我的构建中,我为 localhost 添加了一个测试,if(document.URL.indexOf("http://") == -1 && document.URL.indexOf("localhost") != 7)以便我可以从文件系统本地打开 index.html(如果需要)。
2021-03-22 07:46:50
如果您的应用程序可以使用 https 在浏览器中运行,您还应该检查“https”协议,因此“if”应该是: if (document.URL.indexOf('http://') === -1 && document.URL .indexOf('https://') === -1)
2021-03-30 07:46:50
即使在浏览器中运行,window.isphone 对我来说似乎也是如此。为什么会这样?
2021-04-03 07:46:50

您应该使用 deviceready 事件来避免发生有趣的事情。

文档状态:

这是每个 PhoneGap 应用程序都应该使用的非常重要的事件。

PhoneGap 由两个代码库组成:native 和 JavaScript。在加载本机代码时,会显示自定义加载图像。但是,JavaScript 仅在 DOM 加载后才加载。这意味着您的 Web 应用程序可能会在加载之前调用 PhoneGap JavaScript 函数。

一旦 PhoneGap 完全加载,PhoneGap deviceready 事件就会触发。设备触发后,您可以安全地调用 PhoneGap 函数。

通常,您会希望document.addEventListener在 HTML 文档的 DOM 加载后附加一个事件侦听器

在此处阅读文档:http : //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

他们不一样。

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

我的建议是,将 Cordova/PhoneGap 插件的所有初始化代码放在deviceready事件发生时触发的回调函数中例子:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}

@Kinjal 的回答确实帮助我走上正轨,但我不得不解决很多时间问题。

我使用 Cordova 设备就绪事件来读取我的应用程序的数据文件,一些 JSON 数据包驱动界面构建并默认加载到 www 文件夹中,但最终可能会从服务器下载,以升级应用程序数据库。

我发现了很多问题,因为应用程序数据结构在路由开始之前没有足够的时间进行初始化。

我结束了这个解决方案:首先初始化 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,当我测试你建议的过程时,它在 function 中没有做任何事情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>