Android WebView JS 交互以及传各种类型到JS函数

最新推荐文章于 2024-09-14 19:06:02 发布

阿文丶

最新推荐文章于 2024-09-14 19:06:02 发布

阅读量2k

点赞数 2

分类专栏： Android 学习笔记文章标签： android webview javascript webview js 交互以及传参

本文链接：https://blog.csdn.net/XiaoSe_307/article/details/51822109

版权

Android 学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近闲着没事干，公司有自己的安卓APP，平常测试页面JS与公司APP交互比较麻烦，突发奇想自己写一个APP来实现公司APP与页面JS的交互功能。

第一步：让自己的APP有访问网络的权限，在XXXManifest.xml加入下句代码

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

第二步：在Activity 类文件中编写与JS交互的相关代码

@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })// 设置JS访问类，要加上此标记
@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	wb_main = (WebView) findViewById(R.id.wb_main);
	wb_main.setWebChromeClient(new WebChromeClient());// 让 JS alert 生效
	wb_main.setWebViewClient(new WebViewClient() {// 打开链接不调用系统浏览器
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			return false;
		}
	});
	wb_main.getSettings().setDefaultTextEncodingName("utf-8");// 设置编码
	wb_main.getSettings().setJavaScriptEnabled(true);// 支持js
	wb_main.setBackgroundColor(Color.argb(0, 0, 0, 0));// 设置背景颜色透明
	wb_main.addJavascriptInterface(new JSHandler(getBaseContext()), "js_handler");// 设置本地调用对象及其JS访问名称
	wb_main.loadUrl("file:///android_asset/demo.html");// 载入asset文件夹里面的页面
}

开放给JS访问类的编写

public class JSHandler {
	private Context mContxt;

	public JSHandler(Context mContxt) {
		this.mContxt = mContxt;
	}

	@JavascriptInterface // sdk17版本以上加上注解
	public void TestAcessJavaOK1() {
		Toast.makeText(mContxt, "TestAcessJavaOK1", Toast.LENGTH_LONG).show();
	}
        <pre name="code" class="java">        @JavascriptInterface // sdk17版本以上加上注解
	public void TestAcessJavaOK2(String str) {
		Toast.makeText(mContxt, "TestAcessJavaOK2"+str, Toast.LENGTH_LONG).show();
	}

}

第三步：测试是否成功访问，html页面写了两个JS函数用来测试

function TestAccessJava(){
     js_handler.TestAcessJavaOK1();
}
function TestAccessJava(){
     js_handler.TestAcessJavaOK2('just test');
}

以上代码完成了JS访问Java的测试。

第四步：接下来是Java访问页面里面的JS函数。我们在Html页面在写两个函数，一个JS函数的参数是字符串类型，还有一个JS函数的参数是Json类型：

function TestAccessJsOK1(data) {
        alert(data);
}
function TestAccessJsOK2(data) {
        var temp = '';
        for (var i = 0; i < data.length; i++) {
            temp += data[i]["name"] + ':' + data[i]["age"] + '|';
        }
        document.getElementById('ap').value = temp;
}

我们在layout文件中添加两个按钮，并在Activity类文件中添加点击事件代码编写，

btn1.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		wb_main.loadUrl("javascript:TestAccessJsOK1('just test!')");
	}
});
btn2.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
        String strData="[{\"name\":\"tester1\",\"age\":\"18\"},{\"name\":\"tester2\",\"age\":\"19\"},{\"name\":\"tester3\",\"age\":\"20\"}]";
        String strJS="javascript:var data=eval('" + strData + "');TestAccessJsOK2(data)";
		wb_main.loadUrl(strJS);
	}
});

一开始我以为WebView.loadUrl()只能加载页面，调用页面JS可能是用WebView的其他方法，百度了一下才发现也可以调用页面JS，而且还可以执行JS语句，可以预先对JS参数的实现。