jquery移动加载器无法在android上运行

Posted 2023-05-09

【中文标题】jquery移动加载器无法在android上运行

【英文标题】：jquery mobile loader not working on android

【发布时间】：2016-06-16 04:39:40

【问题描述】：

我正在为 android 和 ios 开发一个混合应用程序。这不是我的第一个应用程序，但我也不认为自己是专家。目前我的目标是 Android 4.4 或更高版本。对于 iOS，我有一个 iPhone 4S 进行测试，不支持低于 iOS 9.2 的任何内容。为了制作这个应用程序，我目前正在使用 Phonegap Build，它输出 version=cli-5.2.0 并使用 jQuery Mobile 1.4.5 作为处理 UI、导航等的框架。 javascript 正在本地加载 - 从设备。

考虑到某些服务器交互需要一些时间来加载，我想在服务器交互过程中显示加载 gif。为此，我使用了来自 jQuery Mobile 的 loader 小部件。 ajax请求调用代码如下：

$.serviceCall = function(web_method, web_root, params)

    var ajax_response;
    var request_url = 'http:/some.url.com/' + web_root + '/' + web_method;

    $.mobile.loading( "show", 
        text: "loading",
        textVisible: false,
        theme: "z",
        html: ""
    );

    $.ajax(
        type: 'get',
        contentType: 'application/json; charset=utf-8',
        async: false,
        dataType: 'json',
        url: request_url,
        data: params,
    ).done(function(data)
        ajax_response = data
        ajax_response.callback = 'done';
        $.mobile.loading("hide");
    ).fail(function(jqXHR, textStatus, errorThrown)
        var failure_details = 
            status: jqXHR.status,
            text_status: textStatus,
            error_thrown: errorThrown
        ;
        ajax_response = failure_details;
        ajax_response.callback = 'fail';
    $.mobile.loading("hide");
    );

    return ajax_response;
;

当从桌面浏览器或从涟漪模拟器访问以模拟实际设备时，它工作得非常好。一旦请求开始，加载程序就会显示，一旦请求结束就会隐藏并进行页面转换。

但是，在 android 上不起作用。每当请求启动时，无论请求花费多长时间，加载程序都不会显示。我需要应用移动操作系统的任何技巧才能使其正常工作吗？

【问题讨论】：

请在您的帖子中回答以下问题。因为这似乎是你关于这个主题的第一篇文章。这是您的第一个混合应用程序吗？您在使用桌面应用程序吗？您的目标平台及其目标版本是什么：Android 4、5、6？ iOS 7、8、9？你在使用CLI, SDK or Build 吗？请不要假设答案，请阅读链接。一旦您在帖子中回答了问题，请在 cmets 中回复，以便我知道您已在帖子中添加信息。

@JesseMonroy650 对不起，我完全失去了你的评论！我根据您的要求更新了问题信息，如果您需要任何其他信息，请告诉我，谢谢！

您在使用桌面应用程序吗？您使用的是什么框架：Angular、Express、Ember？

@JesseMonroy650 jQuery Mobile，它在标题上，不过我会把它添加到描述中

好的。我将其添加到您的原始帖子中。我在胡乱猜测。

【参考方案1】：

查看guide，了解如何检查应用程序。

我建议取出$.mobile.loading("hide");，这样您就可以保持加载程序运行以查看发生了什么。可能是z-index 问题或console 中的错误

【讨论】：

所以我这样做了，我发现了 2 个有趣的事情：首先，加载程序在 android 中出现的时间比在桌面环境中出现的时间要长一些，其次：即使在我进行转换时没有 $.mobile.loading('hide')在加载器消失的页面之间，过渡是否在它可以显示加载器之前发生？那么如何预防呢？

@Juan Carlos Alpizar Chinchilla -- 不知道为什么会有延迟，试试移动火狐浏览器看看是否更快 -- 您可以添加一秒左右的超时来隐藏加载程序 -- 例如(setTimeout(function() $.mobile.loading("hide"); , 2000);) 所以至少你看到了——不确定你遇到的其他问题，但听起来像是浏览器问题而不是 JQM—— - 我从来没有使用过内置加载器，我自己不太喜欢它，而是我使用了 spin js -- fgnass.github.io/spin.js

问题是页面转换一开始加载器就消失了，我会深入研究页面转换事件，看看能不能更快地显示出来。另一方面，我不知道旋转，我会试一试:)

【参考方案2】：

你犯了一个常见的错误。您需要申请whitelist 系统。从Cordova Tools 5.0.0（2015 年 4 月 21 日）开始需要它。对于Phonegap Build，这意味着从cli-5.1.1（2015 年 6 月 16 日）开始

将此添加到您的config.xml

<plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

请注意，您的应用现在不安全。保护您的应用程序由您决定。 将以下内容添加到您的 index.html

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

这个白名单工作表应该会有所帮助。HOW TO apply the Cordova/Phonegap the whitelist system

如果不是这个，那么可能有一个我可能不熟悉的 JQuery Mobile 设置。

【讨论】：

我当然可以使用白名单插件，但我现在的配置与您建议的配置非常不同。我会在几个小时后检查一下，我会及时通知你，因为现在是凌晨 1:50：p

我怀疑你的 index.html 中有 Javascript。在这种情况下，您将需要 CSP（内容安全策略）。