安卓webview和h5交互

先上html的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
	<HEAD><TITLE>安卓和js交互demo</TITLE>
	<meta charset="utf-8">
	</HEAD>
	<script> 
	  function giveAndroidData(content){
		var str = navigator.userAgent;
		if(str.indexOf("androidToJsDemo") != -1){
			android_js.giveAndroidData(content);
		}	
	  }
	 function getAndroidData(){
		var str = navigator.userAgent;
		if(str.indexOf("androidToJsDemo") != -1){
			alert("获取到安卓数据：" + android_js.getAndroidData());
		}
	  }  
	  function getData(content){
		alert("安卓调用了js的getData()方法，js拿到安卓传过来的数据："+content);
		return 'bcd';
	  }
	</script>
	<BODY>
	<button type="button"  onclick="giveAndroidData('js调用了安卓的方法，给安卓传了数据')">调用安卓方法，给安卓传数据</button><br/><br/>
	<button type="button"  onclick="getAndroidData()">调用安卓方法，获取安卓数据</button>
	</BODY>
</HTML>

为了方便各位测试，上面的html代码我放到了自己的腾讯云服务器上，地址：http://123.206.81.43:8080/demo/androidToJsDemo.html

主要有两个按钮，都是js主动调用安卓方法，一个是给安卓传数据，另一个是获取安卓数据。

然后看一下安卓布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="getDataFromJs"
        android:text="安卓调用js方法" />
</LinearLayout>

就一个webview和button，很简单

接下来看一下webview对应的activity代码：

import android.graphics.Bitmap;
import android.os.Build;
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.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private WebView mWebView;
    private final String url = "http://123.206.81.43:8080/demo/androidToJsDemo.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = findViewById(R.id.webView);
        WebSettings settings = mWebView.getSettings();
        settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");
        settings.setJavaScriptEnabled(true);// 表示支持js
        settings.setJavaScriptCanOpenWindowsAutomatically(true);

        mWebView.addJavascriptInterface(this, "android_js");
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.e(TAG, "onPageStarted");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.e(TAG, "onPageFinished");
            }
        });
        //不加这个，js中的alert就不会正常显示，webview只是一个承载体,各种内容的渲染需要使用webviewChromClient去实现,所以set一个默认的基类WebChromeClient就行
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }

        });
        mWebView.loadUrl(url);
    }

    public void getDataFromJs(View v) {
        //安卓调用js的方法,并传过去abc
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            mWebView.loadUrl("javascript:getData('abc')");
        } else {
            mWebView.evaluateJavascript("javascript:getData('abc')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {//会收到js中getData方法的返回值
                    Log.e(TAG, "onReceiveValue: " + value);
                }
            });
        }
    }

    @JavascriptInterface //一定注意不要忘记注解
    public void giveAndroidData(String content) {//js给安卓传数据
        toast(content);
    }

    @JavascriptInterface
    public String getAndroidData() {//js调用安卓获取数据
        return "这是js从安卓获取到的数据123456";
    }

    public void toast(String s) {
        Toast.makeText(this, s, Toast.LENGTH_LONG).show();
    }

}

其中，@JavascriptInterface注解标记的方法，是js能调用的方法

mWebView.addJavascriptInterface(MainActivity.this, "android_js");

是在js中定义了一个android_js对象，所以js中才能直接用android_js对象调用方法，一定要记得在js中通过UA判断是不是在安卓APP下，因为浏览器里面不存在这个对象，是安卓APP里面才有，我一般是在安卓默认的UA后面加上一段项目相关的字符串，方便js判断是否处于安卓APP里（settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");），然后js通过判断androidToJsDemo这段唯一字符串是否存在来判断是否在安卓APP：

var str = navigator.userAgent;
       if(str.indexOf("androidToJsDemo") != -1){
           //说明处在安卓APP里，不是在浏览器里，也不是ios里
       }

运行截图：点击H5中第一个按钮时，给安卓传过来字符串，安卓通过toast打印出来，如图：

点击第二个按钮获取安卓的数据，将获取到的数据alert出来：

点击安卓原生按钮，调用js方法，如图：

我用的是安卓8.0的模拟器，点击确定以后，可以看到打印出来了js的返回值：

安卓webview和h5交互

猜你喜欢