Android java与HTML的交互

最新推荐文章于 2021-03-10 10:52:06 发布

binary-01

最新推荐文章于 2021-03-10 10:52:06 发布

阅读量1.6k

点赞数 1

分类专栏： Android 文章标签： html android

本文链接：https://blog.csdn.net/ifreeboard/article/details/54415773

版权

Android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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" οnclick="back()" value="返回">
	<h2>HTML5 Test</h2>
</div>
<div class="content">
	<input id="textName" type="text">
	<button class="button" οnclick="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");

binary-01

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android java与HTML的交互

android与javascript交互，android与HTML交互，WebView的使用，Android WebView的使用。Android 如何调用js方法。js如何调用Android的方法，WebView的交互。HTML与Android的交互总结为四个步骤：配置可执行JS脚本 websettings.setJavaScriptEnabled(true);添加通讯接口 webView.addJavaScriptInterface(Interface,"InterfaceName");
复制链接

扫一扫