实现android客户端WebView控件与Javascript交互
代码1：JAVA中代码
1 package com.cartolab.webviewdemo; 2 3 import android.app.Activity; 4 import android.app.AlertDialog; 5 import android.content.DialogInterface; 6 import android.os.Bundle; 7 import android.util.Log; 8 import android.view.View; 9 import android.webkit.WebView; 10 import android.widget.Button; 11 12 public class MainActivity extends Activity { 13 /** Called when the activity is first created. */ 14 @Override 15 public void onCreate(Bundle savedInstanceState) { 16 super.onCreate(savedInstanceState); 17 setContentView(R.layout.main); 18 //获取webView 控件 19 final WebView webview=(WebView)findViewById(R.id.webview); 20 //加上这句话才能使用javascript方法 21 webview.getSettings().setJavaScriptEnabled(true); 22 //加载assets目录下面的demo.html 界面 23 webview.loadUrl("file:///android_asset/demo.html"); 24 Button button=(Button)findViewById(R.id.button); //获取button控件 即"调用html中的js方法" 按钮 25 //给button添加事件响应,执行JavaScript的fillContent()方法 26 button.setOnClickListener(new Button.OnClickListener() { 27 public void onClick(View v) { 28 Log.d("MainActivity","button OnClick"); 29 webview.loadUrl("javascript:updateHtml()"); 30 } 31 }); 32 33 //增加接口方法,让html页面调用 34 webview.addJavascriptInterface(this,"login"); 35 } 36 37 public void startFunction(){ 38 AlertDialog.Builder ab=new AlertDialog.Builder(MainActivity.this); 39 ab.setTitle("提示"); 40 ab.setMessage("通过js 调用了 java 中的方法"); 41 ab.setPositiveButton("确定", new DialogInterface.OnClickListener() 42 { 43 @Override 44 public void onClick(DialogInterface dialog, int which) { 45 dialog.dismiss(); 46 } 47 }); 48 ab.create().show(); 49 } 50 }
代码2：HTML中代码
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function updateHtml() { 5 document.getElementById("content").innerHTML = "你通过 android 中的控件调用了html 中js 的方法"; 6 alert("dialog"); 7 } 8 </script> 9 </head> 10 11 <body> 12 this is my html 13 <a onClick="window.login.startFunction()" href="";>调用java中个的方法</a> 14 <span id="content"></span> 15 </body> 16 </html>
代码3：android界面xml文件
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 > 7 8 <WebView 9 android:layout_weight="9" 10 android:id="@+id/webview" 11 android:layout_width="fill_parent" 12 android:layout_height="fill_parent" 13 /> 14 15 <Button 16 android:layout_weight="1" 17 android:id="@+id/button" 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" 20 android:text="调用html中的js 方法" 21 /> 22 23 <Button 24 android:layout_weight="1" 25 android:id="@+id/button1" 26 android:layout_width="fill_parent" 27 android:layout_height="wrap_content" 28 android:text="重新加载html" 29 /> 30 </LinearLayout>
效果图：
源代码链接：http://files.cnblogs.com/bluemaplestudio/WebViewDemo.zip