2012年1月18日水曜日

[Android] WebViewのJavaScriptとJavaを連携する時に注意したこと

Asus Transformer TF101 Android 3.2.1でWebView使って詰まったことの覚え書き

・console.logの出力
そのままでもlogcatに出力されるはずが出力されず。
調べてみたら、WebChromeClientのonConsoleMessageをオーバーライドすればできるらしい。
こんな感じ。

WebView wv = (WebView)v.findViewById(R.id.webview);
wv.loadUrl("file:///android_asset/www/index.html");
wv.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onConsoleMessage(ConsoleMessage cm){
        log.d("hogeActivity", cm.message() + "--From line " + cm.lineNumber() + " of " + cm.sourceId());
        return true;
    }
});

html上でconsole.logが呼ばれたタイミングでこのonConsoleMessageが呼ばれ、logcatにlogを出力してくれる。
cm.message():ログの内容
cm.lineNumber():console.logの呼ばれたhtml上の行番号
cm.sourceId():console.logの呼ばれたファイルパス

・JavaScriptのfunctionをJavaから呼ぶ

wv.loadUrl("javascript:hoge()");

hoge()はhtml上で定義してあるJavaScriptのfunction。

・jQueryのfunctionをJavaから呼ぶ
基本は上と同じ。でも、下のhoge()は呼べない。

$(document).ready(function() {
    function hoge() {
        $(document).text("hello world");
    }
});

どうやら、$(document).ready(function() {}); で囲われた部分のfunctionは呼べないらしい。
まあグローバルメソッドじゃないから当たり前といえば当たり前か…
だから、下記のように囲わないで記述すれば呼ぶことができる。
function hoge() {
    $(document).text("hello world");
}

ていうか、$(document).ready(function() {}); で囲わなくても動くんですね…
EDIT: なんかうまく追加したプラグインがロードできてない…ログを見るかぎりではロードの順序がおかしいみたいだけど。

あ、WebViewのJavaScriptを有効にし忘れないようにー。
wv.getSettings().setJavaScriptEnabled(true);