android学习之 webview 原生与js的交互

android WebView 与js交互

闲话少数直接贴代码

package com.example.crash.activity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnCancelListener;
import android.content.DialogInterface.OnKeyListener;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.example.crash.R;

/**
 * webview 与 js交互
 * @author lixkb
 * @date 2015-9-10下午1:22:43
 */
public class WebViewActivity extends Activity{
	
	private WebView mWebView;
	private Button serverBtn, clientBtn, functionBtn,functionDataBtn;
	@SuppressLint("JavascriptInterface")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_webview);
		serverBtn = (Button) findViewById(R.id.server_btn);
		clientBtn = (Button) findViewById(R.id.client_btn);
		functionBtn = (Button) findViewById(R.id.android_btn);
		functionDataBtn = (Button) findViewById(R.id.androiddata_btn);
		setListener();
		
		mWebView = (WebView) findViewById(R.id.webview);
		WebSettings settings = mWebView.getSettings();
		settings.setJavaScriptEnabled(true);//允许与js 交互
		settings.setDefaultTextEncodingName("utf-8");//支持中文
		
		mWebView.setWebViewClient(new WebViewClient(){//在webview中打开网页  而不是使用默认的浏览器

			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				// TODO Auto-generated method stub
				view.loadUrl(url);
				return true;
			}
			
		});
		
		//webView与js 交互
		mWebView.addJavascriptInterface(new WebViewInterface(this), "webviewInstance");
		//不设置这个js中的方法会显示，但是不会alert
		mWebView.setWebChromeClient(new WebChromeClient(){

			/**
			 * 覆盖默认的window.alert展示界面，避免title里显示为“：来自file:”
			 */
			public boolean onJsAlert(WebView view, String url, String message,
					JsResult result) {
				final AlertDialog.Builder builder = new AlertDialog.Builder(
						view.getContext());

				builder.setTitle("对话框").setMessage(message)
						.setPositiveButton("确定", null);

				// 不需要绑定按键事件
				// 屏蔽keycode等于84之类的按键
				builder.setOnKeyListener(new OnKeyListener() {
					public boolean onKey(DialogInterface dialog, int keyCode,
							KeyEvent event) {
						Log.v("onJsAlert", "keyCode==" + keyCode + "event="
								+ event);
						return true;
					}
				});
				// 禁止响应按back键的事件
				builder.setCancelable(false);
				AlertDialog dialog = builder.create();
				dialog.show();
				result.confirm();// 因为没有绑定事件，需要强行confirm,否则页面会变黑显示不了内容。
				return true;
				// return super.onJsAlert(view, url, message, result);
			}

			public boolean onJsBeforeUnload(WebView view, String url,
					String message, JsResult result) {
				return super.onJsBeforeUnload(view, url, message, result);
			}

			/**
			 * 覆盖默认的window.confirm展示界面，避免title里显示为“：来自file:”
			 */
			public boolean onJsConfirm(WebView view, String url,
					String message, final JsResult result) {
				final AlertDialog.Builder builder = new AlertDialog.Builder(
						view.getContext());
				builder.setTitle("对话框")
						.setMessage(message)
						.setPositiveButton("确定",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int which) {
										result.confirm();
									}
								})
						.setNeutralButton("取消",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int which) {
										result.cancel();
									}
								});
				builder.setOnCancelListener(new OnCancelListener() {
					@Override
					public void onCancel(DialogInterface dialog) {
						result.cancel();
					}
				});

				// 屏蔽keycode等于84之类的按键，避免按键后导致对话框消息而页面无法再弹出对话框的问题
				builder.setOnKeyListener(new OnKeyListener() {
					@Override
					public boolean onKey(DialogInterface dialog, int keyCode,
							KeyEvent event) {
						Log.v("onJsConfirm", "keyCode==" + keyCode + "event="
								+ event);
						return true;
					}
				});
				// 禁止响应按back键的事件
				// builder.setCancelable(false);
				AlertDialog dialog = builder.create();
				dialog.show();
				return true;
				// return super.onJsConfirm(view, url, message, result);
			}

			/**
			 * 覆盖默认的window.prompt展示界面，避免title里显示为“：来自file:”
			 * window.prompt('请输入您的域名地址', '618119.com');
			 */
			public boolean onJsPrompt(WebView view, String url, String message,
					String defaultValue, final JsPromptResult result) {
				final AlertDialog.Builder builder = new AlertDialog.Builder(
						view.getContext());

				builder.setTitle("对话框").setMessage(message);

				final EditText et = new EditText(view.getContext());
				et.setSingleLine();
				et.setText(defaultValue);
				builder.setView(et)
						.setPositiveButton("确定",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int which) {
										result.confirm(et.getText().toString());
									}

								})
						.setNeutralButton("取消",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int which) {
										result.cancel();
									}
								});

				// 屏蔽keycode等于84之类的按键，避免按键后导致对话框消息而页面无法再弹出对话框的问题
				builder.setOnKeyListener(new OnKeyListener() {
					public boolean onKey(DialogInterface dialog, int keyCode,
							KeyEvent event) {
						Log.v("onJsPrompt", "keyCode==" + keyCode + "event="
								+ event);
						return true;
					}
				});

				// 禁止响应按back键的事件
				// builder.setCancelable(false);
				AlertDialog dialog = builder.create();
				dialog.show();
				return true;
				// return super.onJsPrompt(view, url, message, defaultValue,
				// result);
			}

		});
		
	}
	
	private OnClickListener myOnClickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()) {
			case R.id.server_btn:
				mWebView.loadUrl("http://www.baidu.com");
				break;
			case R.id.client_btn:
				mWebView.loadUrl("file:///android_asset/webview.html");
				break;
			case R.id.android_btn:
				mWebView.loadUrl("javascript:myFunction()");//android调用js 无参
				break;
			case R.id.androiddata_btn:
				String ddd = "canshu";
				mWebView.loadUrl("javascript:myFunctionAandroid('"+ddd+"')");//android调用js 有参
				break;
			}
		}
	};
	
	private void setListener() {
		// TODO Auto-generated method stub
		serverBtn.setOnClickListener(myOnClickListener);
		clientBtn.setOnClickListener(myOnClickListener);
		functionBtn.setOnClickListener(myOnClickListener);
		functionDataBtn.setOnClickListener(myOnClickListener);
		
		
	}

	class WebViewInterface{
		
		private Context context;
		public WebViewInterface(Context context){
			this.context = context;
		}
		@JavascriptInterface//这个是android 17之后必须的
		public void showToast(String data){
			Toast.makeText(context, data, Toast.LENGTH_SHORT).show();
		}
		
	}

}

相应的html文件

<html>
<head>
<h1>
This is a HTML Page
</h1>
<!-- JavaScript脚本，主要包括了按钮要执行的函数，显示对话框等 -->
<script type="text/javascript">
    //JavaScript方法，弹出对话框显示信息
    function myFunction()
    {
        alert("Hello World!");
    }
     function myFunctionAandroid(data)
    {
        alert(data);
    }
    function onAlert()
    {
        console.log("onAlert method");//显示调试信息
        alert("This is a alert sample from html");
    }
    function onConfirm()
    {
        console.log("onConfirm method");
        var b = confirm("are you sure to login?");
        alert("your choice is " + b);
    }
    function onPrompt()
    {
        console.log("onPrompt method");
        var b = prompt("please input your password", "aaa");
        alert("your input is " + b);
    }

    //调用绑定的Java对象的方法，即调用Android代码显示对话框
    function showAndroidToast(toast)
    {
        console.log("showAndroidToast method");
        webviewInstance.showToast(toast);//注意此处的webviewInstance要和外部传入的名字一致，大小写正确
    }
</script>
</head>
<body>
    
    <p>
        <!-- 前四个按钮调用JS函数 -->
        JavaScript函数调用 <br />
        <button οnclick="myFunction()">点击这里!<tton>
        <br /> 
        <input type="button" value="alert" οnclick="onAlert()" /> <br />
        <input type="button" value="confirm" οnclick="onConfirm()" /> <br />
        <input type="button" value="prompt" οnclick="onPrompt()" /><br />
        <!-- 上面用了两种定义按钮的方式，效果一样的 -->
    </p>
    
    <p>
        <!-- 这个Say hello 按钮调用Android代码中的方法 -->
        用JavaScript按钮调用Android代码 <br /> 
        <input type="button"
            value="Say hello" onClick="showAndroidToast('Hello Android!')" />
    </p>

    <a href="http://www.google.com" />Google
    </a>

</body>
<html>