jQuery Mobile在從本地資源加載時不能在WebView中工作

我想在我的Android應用程序中呈現使用jQueryMobile創建的頁面，但我需要在脫機狀態下在webView中執行此操作。jQuery Mobile在從本地資源加載時不能在WebView中工作

爲此，我開始複製我的頁面的index.html文件，並將所有必需的資源直接存儲到設備的內部存儲器中。然後，我在我的設備和Chrome應用程序的內部瀏覽器中輸入了file:///sdcard/index.html，然後使用jQuery樣式和所有網站顯示出來的網站很好。

然後我進入我的應用程序，在那裏我有一個webView，這就是我實際需要呈現上述頁面的地方。我加載使用loadDataWithBaseURL()（因爲這是我最後需要做的）的頁面是這樣的：

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

我把我所有的財產在我的資產文件夾中的網站目錄。

問題是，如果我加載沒有資產引用的頁面（通常只是調用loadUrl），它會加載但顯然沒有樣式或功能。當我把資產引用號碼loadDataWithBaseURL確實正確地讀取了資產引用，但渲染停留在jqueryMobile的旋轉輪上，頁面從未實際加載。這是我所看到的：

enter image description here

所以總結起來：

我創建使用jQuery Mobile的網站。這只是一個簡單的html 頁面，帶有jQuery的樣式。
我已準備好用於離線加載。我將所需資產打包到一個文件夾中，並在index.html中引用這些資產（例如href="web/styles.css"）。
如果我在我的桌面瀏覽器中加載此頁面，沒有連接，它作品。
如果我加載該頁面在自己的移動瀏覽器（Chrome或內部
一個），它的工作原理。
如果我打開這個網頁沒有在我的WebView資產的引用， 它的工作原理（無定型或圖像等）
如果我打開這個網頁與資產參考在我的網絡視圖中，它
不起作用，它與轉輪粘在一起。連接不會影響問題。
如果我刪除引用JQM樣式錶行，然後在頁面下載，而它的造型，但圖像正確加載（所以參考資產是正確的）

注意，紡車甚至不應該擺在首位，因爲在JQM我完全禁止使用AJAX的出現：

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

奇薄g是AFAIK內部的Android網絡瀏覽器和webviews共享相同的渲染器，所以我迷失在這裏可能發生的事情，並且由於它對普通瀏覽器可以正常工作，所以我可以調試發生了什麼。

供參考，這是我如何定義我的web視圖：

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>

來源

2013-10-15 Gabriel Sanmartin

請顯示index的代碼。html –

剛發佈了簡化版，問題依然存在 –

我剛剛發現註釋掉jQM的css行會使頁面加載（但沒有造型，顯然），所以看起來這是一個與css相關的問題 –

自己解決了。從JellyBean開始，webView設置包含一個用於禁止從文件資源加載的屬性，默認情況下它是禁用的。

從pre-jelly設備運行我的應用程序可以正常工作，但我用於開發的兩個設備均基於4.3。

我解決它使用下面的代碼，如果有人有興趣：使用WebView.pauseTimers()

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

來源

2013-10-15 12:06:05

我可以'你可以使用API 12在JellyBean上運行...你如何使用PréJelly API在pre-jelly上做這項工作？謝謝。 –

在我的情況：http://stackoverflow.com/questions/8390985/android-4-0-1-breaks-webview-html-5-local-storage –

它完美的作品。我只有s.setAllowUniversalAccessFromFileURLs（true），它的工作原理直到Android 5.1。我變得很瘋狂。這s.setAllowFileAccessFromFileURLs（true）保存我的生活！謝謝 – VictorPurMar

避免。

或者嘗試WebView.resumeTimers()當包含WebView的Activity調用onResume()時。

來源

2014-05-15 02:54:19 haitong

謝謝，但問題是不同的 –

非常感謝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-08 19:59:50 ncruz

jQuery Mobile在從本地資源加載時不能在WebView中工作

回答

相關問題