从本地资产加载时,jQuery Mobile无法在WebView中工作

Question

我试图在我的Android应用程序中呈现使用jQueryMobile创建的页面,但我需要在处于脱机状态的webView中执行此操作.

为此,我开始复制我的页面的index.html并将所有必需的资产直接带到我的设备的内部存储.我然后file:///sdcard/index.html在我的设备的内部浏览器和Chrome应用程序中输入它,并且网站显示很好,有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或内置浏览器)中加载此页面
  ,则可以正常运行.

• 如果我在webview中没有资源引用的情况下加载此页面, 它就可以工作(没有样式或图像等)

• 如果我在我的webview中加载带有资产引用的页面,它就
  不起作用,它会被旋转的轮子困住.连通性不会影响问题.

• 如果我删除引用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>

Answer 1

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

从pre-Jelly设备运行我的应用程序运行正常,但我用于开发的两个设备都是基于4.3的.

如果有兴趣的话,我使用以下代码解决了它:

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