WebView 的使用----android和html的交互

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、主布局文件

</LinearLayout>

二、Activity 主类

package com.bright.webhtml;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
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.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
private WebView webview;
private WebSettings set;
private Button tj_btn;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview_main);
tj_btn = (Button) this.findViewById(R.id.tj_btn);

// 实例化WebView对象
webview = (WebView) this.findViewById(R.id.webview);
set = webview.getSettings();

// 设置WebView属性，页面文本编码
set.setDefaultTextEncodingName("utf-8");
// 设置WebView属性，能够执行Javascript脚本
set.setJavaScriptEnabled(true);

// 页面表示的 url 的处理（action）
webview.setWebViewClient(new MyClient());
// 页面 alert 警告框和 Confirm 确认框的处理
webview.setWebChromeClient(new MyChrome());

// 加载需要显示的网页 http://www.51cto.com/
webview.loadUrl("file:///android_asset/dadianhua.html");
// webview.loadUrl("file:///android_asset/day15_webview_js.html");
tj_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:checkform()");
}
});
webview.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
}

class DemoJavaScriptInterface {
@JavascriptInterface
public void clickOnAndroid(String result) {
Log.i("Bright", "返回的结果是:" + result);
}
}

// 处理加载过来的页面里面的请求动作
class MyClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Toast.makeText(MainActivity.this, url, 0).show();
String success = "file:///android_asset/success.html?";
String baidu = "https://www.baidu.com/";

if ("file:///android_asset/success.html?".equals(url)) {
tj_btn.setVisibility(View.GONE);
view.loadUrl(success);
} else if ("https://www.baidu.com/".equals(url)) {
view.loadUrl(success);
}
return true;// true 动作处理过了，后续操作不执行、false 动作没有处理，执行后续操作
}
}

// 处理加载的页面的 alert\Confirm
class MyChrome extends WebChromeClient {
// 错误信息警告提示框的处理
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {

// 关闭页面里面的 alert 警示框
result.cancel();

// 自定义信息警示框
AlertDialog.Builder ad = new AlertDialog.Builder(MainActivity.this);
ad.setIcon(R.drawable.ic_launcher).setTitle("错误信息提示");
ad.setMessage(message).setPositiveButton("确认", null);
ad.create().show();
return true;
}

// 确认信息提示框的处理
@Override
public boolean onJsConfirm(WebView view, String url, String message,
final JsResult result) {

AlertDialog.Builder ad = new AlertDialog.Builder(MainActivity.this);
ad.setIcon(R.drawable.ic_launcher).setTitle("错误信息提示");
ad.setMessage(message);
ad.setPositiveButton("确认", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// 用户界面选择确认时，加载的页面里面的使用 result confirm 进行设置确认
result.confirm();
}
});
ad.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// 用户界面选择取消时，加载的页面里面的使用 result cancel 进行设置取消
result.cancel();
}
});
ad.create().show();
return true;
}

}

// 向上回退
public void goback_btn(View v) {
webview.goBack();
}

// 向下加载
public void forward_btn(View v) {
webview.goForward();
}

// 页面放大
public void in_btn(View v) {
webview.zoomIn();
}

// 页面缩小
public void out_btn(View v) {
webview.zoomOut();
}

// 设置回退
// 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
webview.goBack(); // goBack()表示返回WebView的上一页面
return true;
} else {
super.onKeyDown(keyCode, event);// 退出应用程序
}
return true;
}
}

三、资源布局文件

操作的页面：：：file:///android_asset/dadianhua.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<script language="JavaScript">
//        定义一个 JavaScript 函数供页面的事件来调用
function checkform() {
//                alert 弹出一个警告框
//                alert("你的操作是" + params);

//                得到输入的用户名
var myname = document.getElementById("id1");// 用户名输入框对象
var namevalue = myname.value;
//                验证用户名

if(namevalue.length <= 0){
alert("用户名不能为空");
//                    var div1 = document.getElementById("div1");
//                    div1.innerHTML = "<font color='red'>用户名不能为空</font>";
return;
}

//                得到输入的密码
var mypass = document.getElementById("id2");
var passvalue = mypass.value;
//                验证密码
if(passvalue.length < 6){
alert("密码不能小于 6 为数字");
//                    var div2 = document.getElementById("div2");
//                    div2.innerHTML = "<font color = 'red'>密码为的长度不能小于 6</font>";
return;
}

//                用户名和密码验证都通过之后、得到form 表单对象、执行提交表单信息
if(confirm("确认注册吗？")){
//                    alert("true");

var myform = document.getElementById("form1");
myform.submit();
//                    window.demo.clickOnAndroid("result");
}else{
//                    alert("false\n放弃注册");
}
}
</script>
</head>
<body>

<form action="success.html" id="form1">
用户名：<input type="text" id="id1" /><div style="display: inline;" id="div1" ></div><br />
密    码：<input type="password" id="id2" /><div style="display: inline;" id="div2" ></div><br />

</form>
</body>
</html>