2014年1月26日日曜日

Android4.1以降でandroid_assetに置いたhtmlファイルでJavaScriptを使うときにハマった

JavaScriptをほとんど使ったこと無かったから、少しハマった。
ということでメモ。

AndroidのWebViewでassetsフォルダの中に置いたHTMLを読み込む。
ちなみに、Android Studioだと、Eclipseと違ってassetsフォルダは自動で作成されず、
src/main/assets という感じに自分でフォルダを作らなければならない。
これもちょっとハマった。

で、そこに置いたファイル(ここではassets/index.html)をwebviewで表示するには、

WebView wv = new WebView(this);
setContentView(wv);
wv.loadUrl("file:///android_asset/index.html");

ってな感じでファイルを読み込むのだが、AngularJSを使ったhtmlだとうまく表示されなかった。
JavaScriptがONになってないせいかな、とか思って、

WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);

とやってみたけど、それでもうまく表示されない。
結局問題だったのは、templateUrlを使って外部のテンプレートファイルを読み込んでいたのだが、file:///というローカル環境でファイルを読み込むとcross-domainになるからダメだって。
解決策は

WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
settings.setAllowUniversalAccessFromFileURLs(true);

とすればOK。

最初はAngularJSのせいか、とか思ってたけど、全然違った。
Android4.1(API level 16)以降に追加されたAPIなので、
そのタイミングで制限かかったんだろうな。

0 件のコメント:

コメントを投稿