Js与Android 原生交互

最新推荐文章于 2024-04-16 20:33:30 发布

阿垂

最新推荐文章于 2024-04-16 20:33:30 发布

阅读量1.4k

点赞数 3

分类专栏： Andriod 文章标签： android js

本文链接：https://blog.csdn.net/qq_41198887/article/details/107662194

版权

Js与Android 原生交互一.Android调用Js方法在html文件中编写Android所要调用的函数。test.html<html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></head><body> <p id="test-p">hello!</p> <script t

摘要由CSDN通过智能技术生成

一.Android调用Js方法

在html文件中编写Android所要调用的函数。
test.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
    <p id="test-p">hello!</p>
    <script type="text/javascript">
        function actionFromAndroid(){
   
             document.getElementById('test-p').innerHTML += '<br/>action from android.';
        }

        function actionFromAndroidWithParam(arg){
   
             document.getElementById('test-p').innerHTML += '<br/>action from android with param:'+arg+'.';
        }

    </script>
</body>
</html>

1.使用WebView的loadUrl()函数

设置WebView的javascript可用，WebView加载页面，在UI线程里通过loadUrl()函数调用Js函数。
MainActivity.java

mWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/test.html");
Button button = (Button) findViewById(R.id.button);
Button buttonWithParam = (Button) findViewById(R.id.buttonWithParam);
button.setOnClickListener(new Button.OnClickListener() {
   
    public void onClick(View v) {
   
	    // ui线程中运行
	    runOnUiThread(new Runnable() {
   
	        @Override
	        public void run() {
   
	            // 无参数调用
	            mWebView.loadUrl("javascript:actionFromAndroid()");
				// 传递参数调用
				mWebView.loadUrl("javascript:actionFromAndroidWithParam(" + "'这里填参数'" + ")");
	        }
	    });
    }
});

2.使用WebView的evaluateJavascript函数

设置WebView的javascript可用，WebView加载页面，在主线程里通过mWebView.evaluateJavascript()函数调用Js函数，并在onReceiveValue里处理返回值。

mWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/test.html");
mWebView.addJavascriptInterface(this, "test");
Button button = (Button) findViewById(R.id.button);
Button buttonWithParam = (Button) findViewById(R.id.buttonWithParam);
button.setOnClickListener(new Button.OnClickListener() {
   
    public void onClick(View v) {
   
		mWebView.evaluateJavascript("javascript:actionFromAndroid(), new ValueCallback<String>() {
   
			@Override
			public void onReceiveValue(String value) {
   
			    //此处为 js 返回的结果
			    Toast.makeText(MainActivity.this, "js返回值："+value, Toast.LENGTH_SHORT).show();
			}
		});
    }
});

对比：

方法	易用性	局限性	线程
loadUrl()	使用相对简单	返回值获取困难，效率低	刷新WebView,需在UI线程里进行
evaluateJavascript()	使用相对复杂，效率高,返回值获取容易	Android4.4以上使用	不刷新WebView,主线程中进行

两种方法各有优缺点，我们可以采用两种方式结合：当android版本低于4.4，采用loadUrl()，否则采用evaluateJavascript()。

final int version = Build.VERSION.SDK_INT;
if (version < 18) {
   

    // ui线程中运行
    runOnUiThread(new Runnable() {
   
        @Override
        public void run() {
   
            mWebView.loadUrl("javascript:actionFromAndroid()");
        }
    });

} else {
   
    mWebView.evaluateJavascript("javascript:actionFromAndroid()", new ValueCallback<String>() {
   
        @Override
        public void onReceiveValue(String va

最低0.47元/天解锁文章

阿垂

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Js与Android 原生交互

Js与Android 原生交互一.Android调用Js方法在html文件中编写Android所要调用的函数。test.html<html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></head><body> <p id="test-p">hello!</p> <script t
复制链接

扫一扫