Android与HTML+JS交互

原创文章，首发在 http://blog.csdn.net/leejizhou/article/details/50894531李济洲的博客

在Android开发中，越来越多的商业项目使用了android原生控件与WebView进行混合开发，当然不仅仅就是显示一个WebView那么简单，有时候还需要本地Java代码与HTML中的JavaScript进行交互，Android也对交互做了很好的封装，所以很容易实现例如：点击网页中的按钮Android调用原生对话框，点击网页中的电话号码调用Android拨号APP。这篇给大家介绍下如何实现Android与HTML+js的交互。

有的人可能不理解什么是javascript，可以简单理解为它在HTML中的作用就相当于你在java中写的函数（方法）差不多。
本篇主要实现的功能点：

Android 调用HTML中的javascript脚本
HTML中的javascript脚本调用Android本地代码
Android 调用HTML中的javascript脚本并传递参数
HTML中的javascript脚本调用Android本地代码并传递参数
实现Android调用JS脚本是非常简单的，直接Webview调用loadUrl方法，里面是JS的方法名，并可以传入参数，javascript：xxx()方法名需要和JS方法名相同

 webView.loadUrl("javascript:javacalljs()");

HTML代码

function javacalljs(){
     document.getElementById("content").innerHTML = "<br>JAVA调用了JS的无参函数";
}

实现JS调用Android方法，需要在Java代码中添加下面这句，webview绑定javascriptInterface，js脚本通过这个接口来调用java代码，第一个参数是自定义类对象，映射成JS对象，这里我直接传this，第二个参数是别名，JS脚本通过这个别名来调用java的方法，这个别名跟HTML代码中也是对应的。

  webView.addJavascriptInterface( new JavaScriptInterface(this), "android");

HTML5代码

<input type="button" value="点击调用java代码" onclick="window.android.onClickImg()"/><br/>

上个效果图

下面是具体实现：
先建立一个HTML文件，很简单，里面主要有两个按钮，两个JS方法

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">
function javacalljs(){
     document.getElementById("content").innerHTML = "<br>JAVA调用了JS的无参函数";
}
function javacalljswith(arg){
     document.getElementById("content").innerHTML = ("<br>"+arg);
}
    </script>
</head>
<body>
HTML 内容显示 <br/>
<h1>
    <div id="content">内容显示</div>
</h1>
<br/>
<input type="button" value="点击调用java代码" onclick="window.android.onClickImg()"/><br/>
<input type="button" value="点击调用java代码并传递参数"
       onclick="window.android.onClickImg('http://blog.csdn.net/marvinhq')"/>
</body>
</html>

需要把这个HTML文件放到assets文件夹中注意文件夹位置
这里写图片描述

如果是加载的服务器上的h5页面不要忘记加网络权限，本地assets下面的可以不加

<uses-permission android:name="android.permission.INTERNET"/>

布局文件 activit_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.haiquan.androidh5.MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btnJs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="调用js 无参数" />
        <Button
            android:id="@+id/btnJs2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/btnJs"
            android:text="调用js 有参数" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

java实现类 MainActivity.java


import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.util.logging.Logger;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private WebSettings webSettings;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        settingWebView();
    }

    private  void settingWebView(){
        webSettings =webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);

        // 设置支持缩放
        webSettings.setSupportZoom(true);
        //显示图片时自适应屏幕大小,但是4.4以前好用,4,4以后不好用
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //weView中有链接,在当前 browser 中相应
        webView.setWebViewClient(new MyWebViewClient());
        //设置进度条,处理提示框
        webView.setWebChromeClient(new MyWebChromeClient());
        //添加监听
        webView.addJavascriptInterface( new JavaScriptInterface(this), "android");
        webView.evaluateJavascript("getImgName", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String name) {
                Log.d("onReceiveValue",name);
            }
        });
        webView.loadUrl("file:///android_asset/testh5.html");


        findViewById(R.id.btnJs).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:javacalljs()");
            }
        });
        findViewById(R.id.btnJs2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:javacalljswith('btnJs2')");
            }
        });
    }


  private   class  MyWebViewClient extends WebViewClient{
      public MyWebViewClient() {
          super();
      }
      @Override
      public void onPageFinished(WebView view, String url) {
          super.onPageFinished(view, url);
//          progressBar.setVisibility(View.GONE);
      }

      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          view.loadUrl(url);
          return true;
      }
  }
    /**
     * 设置进度条和提示框
     */
    private class MyWebChromeClient extends WebChromeClient {
        //该方法中可以设置进度条
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
        }
        //该方法中可以处理提示框
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super.onJsAlert(view, url, message, result);
        }
    }
    private class JavaScriptInterface {
        private Context context;
        JavaScriptInterface(Context context) {
            this.context = context;
        }
        //点击图片回调方法
        //必须添加注解,否则无法响应
        @JavascriptInterface
        public void onClickImg() {

            ((Activity)context).runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(context,"调用java方法",Toast.LENGTH_SHORT).show();
                }
            });
        }
        @JavascriptInterface
        public void onClickImg(final String name){
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(context,"调用Java方法并且有参数"+name,Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

好了，这样就实现了Android和h5简单交互，
源码地址：https://github.com/AndroidForDemo/AndroidH5.git

Android与HTML+JS交互

猜你喜欢