Android java与HTML的交互

来源：互联网发布：linux# 编辑：程序博客网时间：2024/06/06 16:25

分析以上实现的功能要点：

title和title中的返回按钮是用HTML实现的，点击返回按钮回到上一个activity
输入框和HTML按钮都是HTML部分，在输入框中输入文字，然后点击HTML按钮会显示一个Toast,如图（name = 张三丰）
底部的按钮ANDROID按钮会在HTML的输入框中显示张三丰

分析完了看代码：

Android xml布局如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_web_view"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="luoxiang.com.webviewh5demo.WebViewActivity">    <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="match_parent">    </WebView>    <Button        android:id="@+id/button"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="android按钮"        /></RelativeLayout>

java代码：

package luoxiang.com.webviewh5demo;import android.content.Context;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.Button;import android.widget.Toast;public class WebViewActivity extends AppCompatActivity implements View.OnClickListener{    private WebAppInterface mAppInterface;    private WebView mWebView;    private Button mButton;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_web_view);        mAppInterface = new WebAppInterface(this);        mButton = (Button) findViewById(R.id.button);        mButton.setOnClickListener(this);        initWV();    }    private void initWV() {        mWebView = (WebView) findViewById(R.id.webView);        mWebView.loadUrl("file:///android_asset/index.html");//加载本地的html        WebSettings settings = mWebView.getSettings();//获取WebSettings对象，利用WebSettings配置WebView        settings.setJavaScriptEnabled(true);//设置允许执行JS脚本        mWebView.addJavascriptInterface(mAppInterface,"app");//添加HTML与AAndroid的通讯接口    }    @Override    public void onClick(View view) {       mAppInterface.showName("张三丰");    }    class WebAppInterface{        private Context context;        public WebAppInterface(Context context) {            this.context = context;        }        ////////////////////////////////   下面是JS调用安卓的的方法        @JavascriptInterface        public void sayHello(String name){            Toast.makeText(context,"name="+name,Toast.LENGTH_SHORT).show();        }        @JavascriptInterface        public void back(){            finish();        }        //////////////////////////////////    下面是安卓调用js的的方法        @JavascriptInterface        public void showName(final String name){           runOnUiThread(new Runnable() {     //Android更新UI需要在主线程               @Override               public void run() {                   mWebView.loadUrl("javascript:showName('"+name+"')");               }           });        }    }}

HTML代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  <title>HTML 测试</title><style type="text/css">*{margin: 0;padding: 0;}.title{position: relative;width: 100%;height: 50px;background-color: #f90;}.back{position: absolute;font-size: 24px;background-color:#f92;width: 60px;height: 50px;}.title h2{position: absolute;right: 30%;height: 50px;float: left;line-height: 50px;}.content{margin: 3px;}#textName{display: block;width: 100%;height: 35px;}.button{display: block;width: 100%;height: 35px;font-size: 24px;border: none;background-color: #f95;}</style><script type="text/javascript">function sayHello() {var name = document.getElementById('textName').value;app.sayHello(name);}function back(){app.back();}function showName(name){document.getElementById('textName').value = name;}</script></head><body><div class="title"><input class="back" type="button" onclick="back()" value="返回"><h2>HTML5 Test</h2></div><div class="content"><input id="textName" type="text"><button class="button" onclick="sayHello()">HTML按钮</button></div></body></html>

HTML代码是使用本地的，放在assets目录中。

HTML与Android的交互总结为四个步骤：

配置可执行JS脚本 websettings.setJavaScriptEnabled(true);
添加通讯接口 webView.addJavaScriptInterface(Interface,"InterfaceName");
js调用Android InterfaceName.MethodName();
Android调用js webView.loadUrl("javaScript:functionName");

0 0