2013-10-15 10 views
5

jQueryMobileを使用して作成したページをAndroidアプリでレンダリングしようとしていますが、オフラインの状態でwebViewで行う必要があります。ローカルアセットからロードするときにjQuery MobileがWebViewで動作しない

そのため、私は自分のページのindex.htmlをコピーし、必要なすべての資産を自分のデバイスの内部ストレージにまっすぐに持っていきました。私はその後、デバイスの内部ブラウ​​ザとChromeアプリケーションの両方に「file:///sdcard/index.html」と入力してロードしました.jQueryのスタイルとすべてで、ウェブサイトがうまく表示されました。

次に私はwebViewを持っている私のアプリケーションに移動し、実際には上記のページをレンダリングする必要があります。私は私の資産フォルダのウェブディレクトリ内のすべての私の資産を守る

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

:私はこのような(それは私が最終的に何をする必要があるかだから)loadDataWithBaseURL()を使用して、ページをロードします。

アセットの参照なしにページをロードすると(通常はloadUrlが呼び出されます)、スタイリングや機能性がなくてもロードされますが、明らかにロードされません。資産参照をloadDataWithBaseURLと呼ぶと、それは実際に資産参照を正しく読み取っていますが、レンダリングはjqueryMobileの回転ホイールで止まってしまい、ページは実際にはロードされません。これは私が見たものである。

enter image description here

ので、それを合計する:

  • 私はjQueryのモバイルを使用してウェブサイトを作成しました。 jQueryのスタイリングを使った単純なhtmlの ページです。

  • オフラインロード用に準備しました。私は必要な資産 をフォルダにまとめ、index.htmlでこれらの資産を比較的参考にしています(例えばhref="web/styles.css")。

  • このページをデスクトップブラウザに接続せずに接続した場合、となります。私は私の携帯電話のブラウザ(クロームまたは内部
    1)で、このページをロードすると

  • は、はそれがに動作します。

  • 私は私のWebViewで資産参照せずにこのページをロードした場合、私は資産参照して、このページをロードする場合は、 はそれが

  • (スタイリングや画像などなし)の作品私のウェブビューでは、
    は動作しません。回転するホイールがついています。接続性は問題に影響しません。

  • 私はjQMスタイルシートを参照する行を削除すると、そのページはそのスタイリングすることなく、ロード ですが、画像が正しくロードされている(その資産へ 参照がが正しいある)

jQMでI完全に無効にAJAXを使用しているので糸車も最初の場所に登場してはならない

注:

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

奇数薄いですgはAFAIK内部のAndroidウェブブラウザとWebviewsが同じレンダラを共有しているので、ここで何が起こっているのか分からなくて、通常のブラウザで問題なく動作するので、何が起こっているのかをデバッグできます。参考のため

、これは私が私の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> 
+0

インデックスのコードを表示してください。html –

+0

はまだ問題が残っている縮小版を投稿しました –

+0

jQMのCSS行がコメントアウトされていることが判明しました。(しかし、スタイリングがなくても、明らかに)、CSS関連の問題です。 –

答えて

28

解決済みです。 JellyBeanからWebViewの設定にファイルリソースからのロードを無効にするプロパティが含まれており、デフォルトでは無効になっています。

プレJellyデバイスからアプリケーションを実行すると問題なく動作しますが、私が開発に使用していた2つのデバイスはどちらも4.3ベースでした。

誰もが興味を持っている場合、私は、次のコードを使用してそれを解く:

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

私は、 API 12を使ってJellyBeanを実行すると、これを見つけることができます。どのようにしてpre-Jellyでこの作業を行いましたか?ありがとう。 –

+1

私の場合:http://stackoverflow.com/questions/8390985/android-4-0-1-breaks-webview-html-5-local-storage –

+0

これは完全に動作します。私はs.setAllowUniversalAccessFromFileURLs(true)のみで、Android 5.1まで動作します。私は熱心になっていた。このs.setAllowFileAccessFromFileURLs(true)は私のライブを保存しました! – VictorPurMar

0

WebView.pauseTimers()を使用しないでください。

または、WebViewを含むアクティビティがonResume()の場合は、WebView.resumeTimers()を試してください。

+0

ありがとうございますが、問題は別のものでした –

0

Gabriel Sanmartinに大きな感謝です。私は似たような状況があったが、私は、定期的にjQueryを使用して、モバイルではない、とのdivにローカル部分のhtmlファイルをロードするために.LOAD()関数を呼び出し、そのようにした

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

    } 
}); 

私はほぼ半分を過ごしました私はこのスレッドに来るまで& JSコードをデバッグしています。これら2つの設定を見つけることは素晴らしいことでした。それはすべての違いを作った。私のC#のコードは以下の通りです:

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

はFYI:Android.OS.Build.VERSION_CODES.JellyBeanが廃止され、将来のバージョンでは削除されますよう Android.OS.BuildVersionCodes.JellyBeanが推奨されていました。

関連する問題