从本地资产加载时jQuery Mobile的不工作的WebView [英] jQuery Mobile not working in WebView when loading from local assets
问题描述
我想在我的Android渲染应用程序使用jQueryMobile创建的页面，但我需要做一个web视图，处于脱机状态。
为此，我开始复制我的网页的index.html，并采取所有必要的资产，直奔我的设备的内部存储。然后我装起来键入文件：///sdcard/index.html 在我的设备无论是内置浏览器和Chrome浏览器的应用程序，网站出现了就好了，与jQuery风格和所有的。
然后我搬到我的应用程序，在那里我有一个web视图，而这也正是我确实需要使上述页面。我使用加载网页 loadDataWithBaseURL（）（因为这是我最后需要做的）是这样的：
loadDataWithBaseURL（文件：/// android_asset /网络/，HTML，text / html的，UTF-8，NULL）;
我一直在我的资产文件夹中的网站目录的所有我的资产。
现在的问题是，如果我加载网页没有参考资产（通常只是调用使用loadURL ），它负载，但显然没有造型或功能。当我把资产参考呼叫 loadDataWithBaseURL 这的确是读书资产基准正常，但呈现被套牢jqueryMobile的纺车和页面实际上从未负荷。这是我所看到的：
所以，总结一下：
-
我已经创建了使用jQuery Mobile的网站。这只是一个简单的HTML 页面jQuery的造型。
-
我有prepared它用于脱机加载。我收拾好所需的资产 到一个文件夹，并在我的index.html引用这些资产的比较（例如
HREF =网页/ styles.css的）。 -
如果我加载该页面在我的桌面浏览器，无需连接，它 作品
-
如果我在我的手机浏览器加载该页面（浏览器或内部
一个），它的工作原理 -
如果我加载该页面的不资产在我的WebView参考， 它的工作原理（无定型或图像等。）
-
如果我加载该页面的与在我的WebView资产参考，
不工作，它坚持了纺车。连接不会影响的问题。 -
如果我删除引用JQM样式表行，那么页面 不装它的造型，但图像正确加载（所以 参考资产的是正确的）
请注意，该纺车甚至不应该出现在第一位，因为在JQM我完全禁用AJAX的使用：
＆LT;脚本＆GT;
$ .mobile.ajaxEnabled = FALSE;
＆LT; / SCRIPT＆GT;
奇怪的是，AFAIK内部的Android网页浏览器和webviews共享相同的渲染器，所以我迷路了，什么可能会发生在这里，因为它的工作好与普通的浏览器，我可以调试发生了什么。
作为参考，我这是怎么定义我的web视图：
mWebView =（web视图）findViewById（R.id.webView）;
WebSettings S = mWebView.getSettings（）;
s.setJavaScriptEnabled（真正的）;
我有很多其他的设置，但为了简化问题，我删除了他们的问题仍然存在。
有什么建议？
PD。按照要求，发布index.html文件。这是最简单的例子中，只是一个空索引。问题仍然存在：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML语言= ES＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT; META NAME =苹果移动网络应用能力的内容=是＆GT;
＆LT; META NAME =苹果触摸全屏内容=是＆GT;
＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模为1，最大规模= 1＆GT;
＆LT; META NAME =格式检测CONTENT =电话=无/＆GT;
＆LT; META NAME =HandheldFriendlyCONTENT =真/＆GT;
＆LT; META NAME =MobileOptimizedCONTENT =320/＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;
我的标题
＆LT; /标题＆GT;
＆LT;脚本＆GT;
$ .mobile.ajaxEnabled = FALSE;
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ jQuery的/ jQuery的-1.9.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ jQuery的/ jquery.mobile-1.3.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =CSS / jquery.mobile-1.3.2.min.css相对=样式媒体=屏幕类型=文本/ CSS/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决它自己。从软糖原来上，web视图设置包括一个属性来禁用加载的文件资源，并且默认是禁用的。
运行由pre-果冻设备工作正常，我的应用程序，但我是用发展的两个设备都是4.3为主。
我解决了它使用下面的code，如果有人有兴趣：
如果（Build.VERSION.SDK_INT＆GT; = Build.VERSION_ codeS.JELLY_BEAN）{
s.setAllowUniversalAccessFromFileURLs（真正的）;
s.setAllowFileAccessFromFileURLs（真正的）;
}
I am trying to render in my Android app a page created using jQueryMobile, but I need to do it in a webView, in an offline state.
For that purpose, I started copying the index.html of my page and taking all the required assets straight to the internal storage of my device. I then loaded it up typing file:///sdcard/index.html in both the internal browser of my device and the Chrome app, and the website showed up just fine, with jQuery styles and all.
Then I move in to my app, where I have a webView, and that's where I actually need to render the aforementioned page. I load the page using loadDataWithBaseURL() (because that's what I ultimately need to do) like this:
loadDataWithBaseURL("file:///android_asset/web/", html, "text/html", "UTF-8", null);
I keep all my assets in the web directory of my assets folder.
The problem is, if I load the page without the assets reference (just normally calling loadUrl) it loads but obviously without styling or functionality. When I put the assets reference calling loadDataWithBaseURL it IS indeed reading the asset reference properly but the rendering is stuck with jqueryMobile's spinning wheel and the page never actually loads. This is what I see:
So to sum it up:
I have created a website using jQuery Mobile. It's just a simple html page with jQuery's styling.
I have prepared it for offline loading. I packed the required assets into a folder and in the index.html I reference these assets relatively (e.g.
href="web/styles.css").If I load this page in my desktop browser, without connectivity, it works.
If I load this page in my mobile browser (Chrome or the internal
one), it works.If I load this page without the assets references in my webview, it works (without styling or images, etc.)
If I load this page with the assets reference in my webview, it
does not work, it's stuck with the spinning wheel. Connectivity does not affect the issue.If I remove the line that references the jQM stylesheet, then the page is loaded without its styling, but images are loaded properly (so the reference to the assets is correct)
Note that the spinning wheel shouldn't even be appearing in the first place since I completely disabled AJAX in jQM using:
<script>
$.mobile.ajaxEnabled = false;
</script>
The odd thing is that AFAIK the internal Android web browser and webviews share the same renderer, so I'm lost as to what could be happening here, and since it works okay with regular browsers, I can debug what's happening.
For reference, this is how I define my webView:
mWebView = (WebView) findViewById(R.id.webView);
WebSettings s = mWebView.getSettings();
s.setJavaScriptEnabled(true);
I had a bunch of other settings but for the sake of simplifying the problem I removed them and the issue persists.
Any suggestions?
PD. As requested, posting the index.html file. This is the simplest example, just an empty index. The problem persists:
<!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>
Solved it myself. Turns out from JellyBean on, the webView settings include a property to disable loading from file resources, and it is disabled by default.
Running my app from a pre-Jelly device works fine, but the two devices I was using for development were both 4.3 based.
I solved it using the following code, if anyone is interested:
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
s.setAllowUniversalAccessFromFileURLs(true);
s.setAllowFileAccessFromFileURLs(true);
}
这篇关于从本地资产加载时jQuery Mobile的不工作的WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
