5

我正在尝试在我的 Android 应用程序中呈现使用 jQueryMobile 创建的页面，但我需要在 webView 中以离线状态进行。

为此，我开始复制我的页面的 index.html 并将所有需要的资产直接放到我设备的内部存储中。file:///sdcard/index.html然后，我在设备的内部浏览器和 Chrome 应用程序中输入，然后加载它，网站显示得很好，带有 jQ​​uery 样式等等。

然后我进入我的应用程序，在那里我有一个 webView，这就是我实际需要呈现上述页面的地方。loadDataWithBaseURL()我使用（因为这是我最终需要做的）加载页面，如下所示：

loadDataWithBaseURL("file:///android_asset/web/", html, "text/html", "UTF-8", null);

我将所有资产保存在资产文件夹的 web 目录中。

问题是，如果我在没有资产引用的情况下加载页面（只是正常调用loadUrl），它会加载但显然没有样式或功能。当我把资产引用调用loadDataWithBaseURL它时，确实正确地读取了资产引用，但是渲染被 jqueryMobile 的旋转轮卡住了，并且页面从未真正加载。这就是我所看到的：

在此处输入图像描述

所以总结一下：

  • 我使用 jQuery Mobile 创建了一个网站。它只是一个带有 jQ​​uery 样式的简单 html 页面。

  • 我已经为离线加载做好了准备。我将所需的资产打包到一个文件夹中，并在 index.html 中相对引用了这些资产（例如href="web/styles.css"）。

  • 如果我在我的桌面浏览器中加载这个页面，没有连接，它可以工作。

  • 如果我在我的移动浏览器（Chrome 或内部浏览器
    ）中加载此页面，它可以工作。

  • 如果我在我的 web 视图中加载此页面而没有资产引用， 它可以工作（没有样式或图像等）

  • 如果我在我的 web 视图中使用资产引用加载此页面，它就
    不起作用，它被旋转轮卡住了。连接不影响问题。

  • 如果我删除引用 jQM 样式表的行，则加载页面时没有其样式，但图像加载正确（因此对资产的引用是正确的）

请注意，旋转轮甚至不应该首先出现，因为我在 jQM 中完全禁用了 AJAX，使用：

<script>
$.mobile.ajaxEnabled = false;
</script>

奇怪的是，AFAIK 内部的 Android 网络浏览器和网络视图共享相同的渲染器，所以我不知道这里可能发生什么，而且由于它适用于常规浏览器，我可以调试正在发生的事情。

作为参考，这就是我定义我的 webView 的方式：

    mWebView = (WebView) findViewById(R.id.webView);
    WebSettings s = mWebView.getSettings();
    s.setJavaScriptEnabled(true);

我有很多其他设置，但为了简化问题，我删除了它们，问题仍然存在。

有什么建议么？

PD。根据要求，发布 index.html 文件。这是最简单的例子，只是一个空索引。问题依然存在：

<!doctype html>
<html lang=es>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<head>
<title>
    My title
</title>

<script>
$.mobile.ajaxEnabled = false;
</script>

<script src="script/jquery/jquery-1.9.1.min.js"></script>
<script src="script/jquery/jquery.mobile-1.3.2.min.js"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" media="screen" type="text/css"  />


</head>

<body>

</body>
</html>
4

3 回答 3

28

自己解决了。从 JellyBean 开始，webView 设置包含一个禁用从文件资源加载的属性，默认情况下它是禁用的。

从 pre-Jelly 设备运行我的应用程序运行良好，但我用于开发的两台设备都是基于 4.3 的。

如果有人感兴趣，我使用以下代码解决了它：

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        s.setAllowUniversalAccessFromFileURLs(true);
        s.setAllowFileAccessFromFileURLs(true);
    }
于 2013-10-15T12:06:05.680 回答
0

避免使用WebView.pauseTimers().

WebView.resumeTimers()或者在包含 WebView 的 Activity 调用时尝试onResume()。

于 2014-05-15T02:54:19.310 回答
0

非常感谢 Gabriel Sanmartin。我有类似的情况，但我使用的是常规 jQuery，而不是移动设备，并调用 .load() 函数将本地部分 html 文件加载到 div 中，如下所示：

var divNew = document.createElement('div');
var $divNew = $(divNew);
var sFilePath = sSubfolder + '/' + 'Index.html';
$divNew.load(sFilePath, function (response, status, xhr) {
    if (status == "error") {

    }
});

我花了将近半天的时间来调试 JS 代码，直到我遇到了这个线程。找到这两个设置太棒了。它使一切变得不同。我的 C# 代码如下：

if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)
{
      wbView.Settings.AllowUniversalAccessFromFileURLs = true;
      wbView.Settings.AllowFileAccessFromFileURLs = true;
}

仅供参考：建议使用 Android.OS.BuildVersionCodes.JellyBean，因为 Android.OS.Build.VERSION_CODES.JellyBean 已过时，将在未来版本中删除。

于 2017-07-08T19:59:50.453 回答