从本地资产加载时，jQuery Mobile 在 WebView 中不起作用答案

【问题标题】：jQuery Mobile not working in WebView when loading from local assets从本地资产加载时，jQuery Mobile 在 WebView 中不起作用
【发布时间】：2013-10-15 10:52:16
【问题描述】：

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

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

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

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

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

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

总结一下：

我使用 jQuery Mobile 创建了一个网站。这只是一个简单的html 带有 jQuery 样式的页面。
我已经为离线加载做好了准备。我打包了所需的资产进入一个文件夹并在 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>

【问题讨论】：

请显示index.html的代码
刚刚发了一个精简版，问题依旧存在
我刚刚发现注释掉 jQM css 行会使页面加载（但显然没有样式），所以这似乎是一个 css 相关问题

标签： android jquery-mobile webview

【解决方案1】：

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

从 Jelly 之前的设备运行我的应用可以正常工作，但我用于开发的两台设备都是基于 4.3 的。

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

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        s.setAllowUniversalAccessFromFileURLs(true);
        s.setAllowFileAccessFromFileURLs(true);
    }

【讨论】：

我找不到使用 API 12 在 JellyBean 上运行的内容...您如何使用 pré Jelly API 在 pre-Jelly 上进行这项工作？谢谢。
就我而言：stackoverflow.com/questions/8390985/…
完美运行。我只是 s.setAllowUniversalAccessFromFileURLs(true)，它工作到 Android 5.1。我快疯了。这个 s.setAllowFileAccessFromFileURLs(true) 救了我的命！谢谢

【解决方案2】：

避免使用WebView.pauseTimers()。

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

【讨论】：

【解决方案3】：

非常感谢 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 已过时，将在未来版本中删除。

【讨论】：