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

一、主布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity" >

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

<Button
            android:id="@+id/goback_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="goback_btn"
            android:text="向上" />

<Button
            android:id="@+id/forward_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="forward_btn"
            android:text="向下" />

<Button
            android:id="@+id/in_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="in_btn"
            android:text="放大" />

<Button
            android:id="@+id/out_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="out_btn"
            android:text="缩小" />
    </LinearLayout>

<WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

<Button
        android:id="@+id/tj_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:text="提交" />

</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 表单 -->
        <form action="success.html" id="form1">
            用户名：<input type="text" id="id1" /><div style="display: inline;" id="div1" ></div><br />
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="id2" /><div style="display: inline;" id="div2" ></div><br />
<!--             <input type="button" onclick="checkform();" value="注册" /><a href="https://www.baidu.com/">百度</a> -->
        </form>
    </body>
</html>

跳转后的页面：：：file:///android_asset/success.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册成功！</title>
    </head>
    <body>
        恭喜您注册成功！！
    </body>
</html>