WebViewでJavaScriptを実行できるようにするためのコードを紹介します。
WebViewではデフォルトの状態ではJavaScriptを実行できません。
以下のHTMLファイルをサーバーに配置します。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" language="javascript">
function button_click() {
var a = parseInt(document.forms.form1.text1.value);
var b = parseInt(document.forms.form1.text2.value);
var c = a + b;
document.forms.form1.text3.value = c;
}
</script>
</head>
<body>
Hello Android World!
<form id="form1" method="get" >
<input id="text1" type="text"/>
<input id="text2" type="text"/>
<br />
<input type="button" onclick="button_click()" value="計算"/>
<br />
<input id="text3" type="text"/>
</form>
</body>
</html>
テキストボックスに入力された値の和を求め下部のテキストボックスに表示するJavaScriptが埋め込まれたHTMLファイルです。
Webブラウザで上記のHTMLファイルを開き動作確認します。HTMLファイルを開くと下図の画面が表示されます。
テキストボックスに値を入力し、[計算]ボタンを押します。
2つのテキストボックスに入力した数値の合計が下部のテキストボックスに表示されます。
WebViewによる動作確認
こちらの記事で作成したシンプルなWebViewアプリケーションで上記のHTMLファイルを開きます。下図の画面が表示されます。
テキストボックスに数値を入力し[計算]ボタンを押します。
しかし、[計算]ボタンを押したにもかかわらず計算結果がテキストボックスに表示されません。WebViewでのJavaScriptの実行が無効になっているためです。
対策
WebViewでJavaScriptを実行できるようにするためには、WebViewのWebSettingsオブジェクトのsetJavaScriptEnabledメソッドの引数にtrueを与えて呼び出すと変更できます。
下記のコードを記述します。
MainActivity.java
package com.iPentec.simplewebview;
import com.iPentec.simplewebview.R;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.*;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView1 = (WebView)findViewById(R.id.webView1);
webView1.getSettings().setJavaScriptEnabled(true);
webView1.loadUrl("http://192.168.0.10/test/jstest.html"); //HTMLファイルを配置したURL
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
解説
基本は
こちらの記事で紹介しているWebViewを用いたプログラムと同じです。
webView1.getSettings().setJavaScriptEnabled(true);
の行が追加されており、この行でJavaScriptの実行を許可する設定に変えています。
実行結果
プロジェクトを実行します。下図の画面が表示されます。
テキストボックスに数値を入力します。
[計算]ボタンをタップします。テキストボックスに入力した数値の和が下部のテキストボックスに表示されました。JavcaScriptが実行できていることが確認できました。
補足
WebViewで開いたHTMLのPV数や訪問者数をGoogle Analyticsで集計する場合、JavaScriptの実行を許可する必要があります。JavaScriptの実行がされない場合はGoogleAnalyticsでの集計が動作しません。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-04
作成日: 2013-03-15
