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

zoukankan html css js c++ java

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 动作没有处理，执行后续操作
       }
   }

   // 处理加载的页面的 alertConfirm
   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 放弃注册");
               }
           }
       </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>

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

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

查看全文

相关阅读:
Linux文件与文件系统的压缩
 Linux命令与文件查找
 js兼容pc和移动端的简单拖拽效果
 图片懒加载插件
 css小特效
 创建对象和方法
 距离2021年春节还剩。。。
固定尺寸的图片焦点图案例
 数据库操作
 简单sql操作

原文地址：https://www.cnblogs.com/BrightPoplar/p/5100926.html

最新文章
The End.
岁月
 世界
 所以说
 bless all
下雪了
 自救宝典
 hello world
TheZealous的集训日常之奇奇怪怪的错误
 自用学习资料