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の回転ホイールで止まってしまい、ページは実際にはロードされません。これは私が見たものである。
ので、それを合計する:
私はjQueryのモバイルを使用してウェブサイトを作成しました。 jQueryのスタイリングを使った単純なhtmlの ページです。
オフラインロード用に準備しました。私は必要な資産 をフォルダにまとめ、index.htmlでこれらの資産を比較的参考にしています(例えば
href="web/styles.css"
)。このページをデスクトップブラウザに接続せずに接続した場合、 はとなります。私は私の携帯電話のブラウザ(クロームまたは内部
1)で、このページをロードするとは、はそれがに動作します。
私は私のWebViewで資産参照せずにこのページをロードした場合、私は資産参照して、このページをロードする場合は、 はそれが
(スタイリングや画像などなし)の作品私のウェブビューでは、
は動作しません。回転するホイールがついています。接続性は問題に影響しません。私はjQMスタイルシートを参照する行を削除すると、そのページはそのスタイリングすることなく、ロード ですが、画像が正しくロードされている(その資産へ 参照がが正しいある)
注:
<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>
インデックスのコードを表示してください。html –
はまだ問題が残っている縮小版を投稿しました –
jQMのCSS行がコメントアウトされていることが判明しました。(しかし、スタイリングがなくても、明らかに)、CSS関連の問題です。 –