Android中Java和JS调用对方方法的简介

itCatface

已于 2022-05-28 23:04:56 修改

阅读量1.6k

点赞数 1

分类专栏： # android_webview&cordova 文章标签： android javascript java

于 2016-01-07 10:13:49 首次发布

本文链接：https://blog.csdn.net/itCatface/article/details/50474302

版权

android_webview&cordova 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

A Java 调用 Js 的方法

无参：使用WebView控件loadUrl()方法，传入"javascript:jsMethod()"即可调用jsMethod()方法
带参：同上，并将参数加上即可"javascript:jsMethodWithArg(" + args参数 + ")"

B Js 调用 Java 的方法

使用WebView控件的addJavascriptInterface()方法，传入一个Object对象和一个String标记(Js通过该标记调用Object对象内写好的方法)
关于带不带参数，即Object内的方法和Js调用时配合定义好参数格式，准确传入即可

C 完整案例

html + Js

<html>
	<head>
		<meta http-equiv="Content-Type"	content="text/html;charset=utf-8">
		<script type="text/javascript">

			/*js通过Java给的String标记:Catface调用Java中Object内定义的方法*/
			function jsCallJavaWithArgs(text) {
	        	Catface.showToast(text);
	    	}

	   		function jsCallJava() {
	        	Catface.showToast();
	    	}

	    	/*java调用js方法*/
	    	function javaCallJs(){
		 		document.getElementById("content").innerHTML += "<br\>java调用了js函数";
			}

			function javaCallJsWithArgs(args){
		 		document.getElementById("content").innerHTML += ("<br\>" + args);
			}

			function javaCallJsWithArgs2(args) {
				var sum = 0;
				for(var i = 0; i < args; i++) {
					sum += i;
				}
		 		document.getElementById("content").innerHTML += ("<br\>" + sum);
			}
		</script>
	</head>

	<body>
		<input type="button" value="js调用java代码(带参)" onClick="jsCallJavaWithArgs('我从js写到java上啦')" /><br/>
		<input type="button" value="js调用java代码" onClick="jsCallJava()" /><br/>
		<div id="content">java调用js函数_内容显示……</div>
	</body>
</html>

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <Button
        android:id="@+id/bt_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="java调用js函数" />

    <Button
        android:id="@+id/bt_02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="java调用js函数(带参)" />

    <Button
        android:id="@+id/bt_03"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="java调用js函数(带参2)" />

    <WebView
        android:id="@+id/wv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Java

public class MainActivity extends Activity {
	private WebView wv_main;

	@SuppressLint("SetJavaScriptEnabled")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		wv_main = (WebView) findViewById(R.id.wv_main);	
		wv_main.getSettings().setJavaScriptEnabled(true);	
		wv_main.loadUrl("file:///android_asset/index.html");
		 
		findViewById(R.id.bt_01).setOnClickListener(new OnClickListener() {
			@Override public void onClick(View v) {
				wv_main.loadUrl("javascript:javaCallJs()");
			}
		});
		findViewById(R.id.bt_02).setOnClickListener(new OnClickListener() {
			@Override public void onClick(View v) {
				wv_main.loadUrl("javascript:javaCallJsWithArgs(" + "'我从java写到js上啦'" + ")");
			}
		});
		findViewById(R.id.bt_03).setOnClickListener(new OnClickListener() {
			@Override public void onClick(View v) {
				wv_main.loadUrl("javascript:javaCallJsWithArgs2(" + 10 + ")");
			}
		});
		
		// arg1:Object对象；arg2:String标记
		wv_main.addJavascriptInterface(new JavaMethod(this), "Catface");
	}

	public class JavaMethod {
		Context ctx;

		JavaMethod(Context ctx) {
			this.ctx = ctx;
		}

		@JavascriptInterface
		public void showToast(String text) {
			Toast.makeText(ctx, text, Toast.LENGTH_SHORT).show();
		}

		@JavascriptInterface
		public void showToast() {
			Toast.makeText(ctx, "js调用了java代码", Toast.LENGTH_SHORT).show();
		}
	}
}

补1：Crosswalk中相互调用方式

Java调用Js方法仅修改一点点即可

xv_main.load("javascript:javaCallJs()", null);

xv_main.load("javascript:javaCallJsWithArgs2("java调用js啦")", null);

Js调用Java方法与原生调用同理，但需在Activity的onCreate()中添加

XWalkPreferences.setValue("enable-javascript", true);
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

补2：Cordova + Crosswalk中相互调用方式

Js调用Java：在CordovaActivity中添加this.appView.addJavascriptInterface()即可，参数传递方式同上

注意@JavascriptInterface的包类路径是：org.xwalk.core.JavascriptInterface.即Crosswalk下的API，别导错.

this.appView.addJavascriptInterface(new Object() {
	@JavascriptInterface 
	public void showToast(String text) {
		Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show();
	}

	@JavascriptInterface
	public void showToast() {
		Toast.makeText(getApplicationContext(), "js调用了java代码", Toast.LENGTH_SHORT).show();
	}
}, "Catface");

Java调用Js

// 在CordovaActivity或者CordovaPlugin(插件)类中调用方法如下.
appView.loadUrl("javascript:compare(" + arg1 + "," + arg2 + ")");

// 在CordovaActivity的init()方法或者CordovaPlugin的onCreate()方法中务必添加，否则后果自负.
appView.loadUrl("file:///android_asset/www/index.html");
super.setIntegerProperty("loadUrlTimeoutValue", Integer.MAX_VALUE);