android 的webView加载h5，和h5的交互（java和JavaScript的交互）

最新推荐文章于 2024-05-23 16:47:38 发布

pszh

最新推荐文章于 2024-05-23 16:47:38 发布

阅读量1.2w

点赞数 2

分类专栏： android 开发文章标签： webView和h5交互 java和js交互

android 开发专栏收录该内容

43 篇文章 0 订阅

订阅专栏

Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。（通俗点说就是，点击那个Web页面的按钮啥的，可以传到原生app;或者原生app调用Web页面的js方法）

如何实现

实现Java和js交互十分便捷。通常只需要以下几步。

WebView开启JavaScript脚本执行
WebView设置供JavaScript调用的交互接口。
客户端和网页端编写调用对方的代码。

本例代码

为了便于讲解，先贴出全部代码

Java代码

package com.example.testjs;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
//参考文档http://www.igooda.cn/jzjl/20141212737.html
public class MainActivity extends Activity {
	private static final String LOGTAG = "MainActivity";

	@SuppressLint("JavascriptInterface")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		final WebView myWebView = (WebView) findViewById(R.id.myWebView);
		WebSettings settings = myWebView.getSettings();
		settings.setJavaScriptEnabled(true);
		//注入接口
		//js_java_interaction.html文件中的toastMessage(),sumToJava()方法中的window后面的字段
		myWebView.addJavascriptInterface(new JsInteration(), "control");
		myWebView.setWebChromeClient(new WebChromeClient() {});
		myWebView.setWebViewClient(new WebViewClient() {

			@Override
			public void onPageFinished(WebView view, String url) {
				super.onPageFinished(view, url);
				testMethod(myWebView);
			}

		});
		myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
	}

	private void testMethod(WebView webView) {
//		只能一次
//		String call = "javascript:sayHello()";
//
//		String call = "javascript:alertMessage(\"" + "content" + "\")";
//
//		String call = "javascript:toastMessage(\"" + "content" + "\")";

		String call = "javascript:sumToJava(1,2)";
		webView.loadUrl(call);

	}
	//返回结果的处理
	public class JsInteration {

		@JavascriptInterface
		public void toastMessage(String message) {
			Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
		}
//		onSumResult字段和 window.control.onSumResult(number1 + number2)中的onSumResult一样
		@JavascriptInterface
		public void onSumResult(int result) {
			Log.i(LOGTAG, "onSumResult result=" + result);
		}
	}

}

前端网页代码

<html>
<script type="text/javascript">
    function sayHello() {
        alert("Hello")
    }

    function alertMessage(message) {
        alert(message)
    }

    function toastMessage(message) {
        window.control.toastMessage(message)
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
    }
</script>
Java-Javascript Interaction In Android
</html>

下面介绍下

如何调用

（1）addJavascriptInterface方法

此方法有两个参数，第一个参数就是我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法；第二个参数是访问我们在obj中声明的方法时候所用到的js对象，调用模式为window.interfaceName.方法名()或者是javascript: interfaceName.方法名() ;，如myWebView.addJavascriptInterface(new JsInteration(), "control");

（2）js调用Java

调用格式为window.jsInterfaceName.methodName(parameterValues) 此例中我们使用的是control作为注入接口名称。

function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

（3）Java调用JS

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

调用js无参无返回值函数

String call = "javascript:sayHello()";
webView.loadUrl(call);

调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。

1.Java调用js代码

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.js函数处理，并将结果通过调用java方法返回

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

3.Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4处理

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例具有返回值的js方法

function getGreetings() {
      return 1;
}

java代码时用evaluateJavascript方法调用

private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

输出结果

I/MainActivity( 1432): onReceiveValue value=1

注意

上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
evaluateJavascript方法必须在UI线程（主线程）调用，因此onReceiveValue也执行在主线程。

好了总体的就这么多了

还有一些错误的话可以参考，代码混淆的话参考原文： http://www.igooda.cn/jzjl/20141212737.html

最后贴下文中使用的demo吧：http://www.oschina.net/code/snippet_2702417_58168

当然如果觉得这边不太好的话还可以看看：http://www.cnblogs.com/lee0oo0/archive/2012/08/01/2617953.html

android 和h5交互基础篇 http://www.jianshu.com/p/a25907862523?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io http://www.jianshu.com/p/a25907862523?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

pszh

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
android 的webView加载h5，和h5的交互（java和JavaScript的交互）

Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。（通俗点说就是，点击那个Web页面的按钮啥的，可以传到原生app;或者原生app调用Web页面的js方法）如何实现实现Java和js交互十分便捷。通常只需要以下几步。Web
复制链接

扫一扫