android webview addJavascriptInterface 的方法不能调用

以前一直觉着用html5做android app是一件很鸡肋的事（勿喷，请恕小的见识少）。

后来又发现很多大公司做的app中都或多或少的使用了html元素，比如微信、qq之类。

最近在网上闲逛发现一个IDE可以使用纯html js css设计app并发布到多个平台，并且更牛的是可以直接使用它提供的js api调用各种系统原生的api。一时心动下载研究。后来发现也并不是想象中多么神奇的事情。

于是乎自己动手；想用html的方式来做界面设计，用js调用一些常用的系统api。比如说http请求、弹窗提示等等。

说搞就搞，由于自己以前没有怎么接触过webview，先做个demo测试测试。

所有代码准备就绪。结果一运行点击按钮居然什么反应都没有。

就十几行代码；各种检查，各种看不出问题所在。

又把以前做的类似的webview的demo导入eclipse运行。居然没问题。。。。。。

把两个demo代码反复比较，都没有找到问题。

结果最终发现居然是我 target api 是4.2的以前的api是4.0的。。。。

4.2及以上api与javascript交互时需要在方法上添加注解@JavascriptInterface 。

好了。下面吧代码摆出来做个记录：

目录结构

我们需要些的就三个文件画红圈的文件。

MainActivity.java

package com.example.testwebview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends Activity {

	private WebView webView;
	@SuppressLint("SetJavaScriptEnabled")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.webview);
		webView = (WebView)this.findViewById(R.id.webview);
		//启用javascript
		webView.getSettings().setJavaScriptEnabled(true);
		//加载本地html文件
		webView.loadUrl("file:///android_asset/test.html");
		/**
		 * 添加javascriptInterface
		 * 第一个参数：这里需要一个与js映射的java对象
		 * 第二个参数：该java对象被映射为js对象后在js里面的对象名，在js中要调用该对象的方法就是通过这个来调用
		 */
		webView.addJavascriptInterface(new JSInterface(), "jsi");
	}
	
	@SuppressWarnings("unused")
	private final class JSInterface{
		/**
		 * 注意这里的@JavascriptInterface注解， target是4.2以上都需要添加这个注解，否则无法调用
		 * @param text
		 */
		@JavascriptInterface
		public void showToast(String text){
			Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show();
		}
		@JavascriptInterface
		public void showJsText(String text){
			webView.loadUrl("javascript:jsText('"+text+"')");
		}
	}

}

test.html

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title></title>
		<script type="text/javascript">
		//这个function是需要被java调用的
		function jsText(text){
			document.getElementById('ttt').innerHTML=text;
		}
		</script>
	</head>
	<body>
		<input type="button" οnclick="jsi.showToast('测试js调用系统api')" value="调用系统api Toast"/><br/>
		<input type="button" οnclick="jsi.showJsText('测试java回调js')" value="让java方法回调html中的js方法"/>
		<div id="ttt"></div>
	</body>
</html>

webview.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webview" >
    

</WebView>

关于AndroidManifest.xml中的权限问题。我看了很多帖子都说要加internet访问权限。

其实经过我测试。如果你的应用中没有需要访问网络的地方、并且你的所有html js css都是放在assets目录下没有从网络上读取文件，是可以不加这个权限的。

下面是我的androidmanifest文件

到这里我的测试是完全通过的。

android webview addJavascriptInterface 的方法不能调用

猜你喜欢