android開發中，webview的js與Native code交互

時間 2019-11-10

標籤 android 開發 webview native code 交互欄目 Android 简体版

原文原文鏈接

項目中使用了webview顯示網頁，其中須要網頁和native方法有交互，搜索到一篇文章，轉發分享一下： javascript

============================================================================================================================== html

轉載請註明出處

挺帥的移動開發專欄 http://blog.csdn.net/wangtingshuai/article/details/8631835

在android的開發過程當中，有不少時候須要用到本地java代碼和javascript進行交互。android對交互進行了很好的封裝，在開發中咱們能夠很簡單的用java代碼調用webview中的js，也能夠用webview中的js來調用本地的java代碼，這樣咱們能夠實現不少原來作不了的功能，好比點擊網頁上的電話號碼後，手機自動撥打電話，點擊網頁中的笑話，自動發送短信等.

廢話很少說，此次教程的目標以下

android 中的java代碼調用webview裏面的js腳本
webview中的js腳本調用本地的java代碼
java調用js並傳遞參數
js調用java並傳遞參數

功能一

android中調用webview中的js腳本很是方便，只須要調用webview的loadUrl方法便可（注意開啓js支持）

[html] view plain copy

// 啓用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 從assets目錄下面的加載html
contentWebView.loadUrl("file:///android_asset/wst.html");
// 無參數調用
contentWebView.loadUrl("javascript:javacalljs()");

功能二

webview中js調用本地java方法，這個功能實現起來稍微有點麻煩，不過也不怎麼複雜，首先要對webview綁定javascriptInterface，js腳本經過這個接口來調用java代碼。

[java] view plain copy

contentWebView.addJavascriptInterface(this, "wst");

javainterface實際就是一個普通的java類，裏面是咱們本地實現的java代碼，將object 傳遞給webview，並指定別名，這樣js腳本就能夠經過咱們給的這個別名來調用咱們的方法,在上面的代碼中，this是實例化的對象，wst是這個對象在js中的別名

功能三
java代碼調用js並傳遞參數
只須要在待用js函數的時候加入參數便可，下面是傳遞一個參數的狀況，須要多個參數的時候本身拼接及行了，注意str類型在傳遞的時候參數要用單引號括起來 java

[java] view plain copy

mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函數test()的參數

功能四
js調用java函數並傳參，java函數正常書寫，在js腳本中調用的時候稍加註意
而後在html頁面中，利用以下代碼，便可實現調用

[html] view plain copy

<div id='b'><a onclick="window.wst.clickOnAndroid(2)">b.c</a></div>

這裏準備了一個實例，實現上面的功能

這裏是實例的html代碼，從assert中加載，原來作項目的時候，從assert中加載的中文網頁會出現亂碼，解決辦法就是給html指定編碼。以下

[html] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java調用了js函數";
}
function javacalljswithargs(arg){
document.getElementById("content").innerHTML +=
("<br\>"+arg);
}
</script>
</head>
<body>
this is my html <br/>
<a onClick="window.wst.startFunction()">點擊調用java代碼</a><br/>
<a onClick="window.wst.startFunction('hello world')" >點擊調用java代碼並傳遞參數</a>
<br/>
<div id="content">內容顯示</div>
</body>
</html>

java代碼以下

[java] view plain copy

package wst.webview;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView contentWebView = null;
private TextView msgView = null;
@SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
contentWebView = (WebView) findViewById(R.id.webview);
msgView = (TextView) findViewById(R.id.msg);
// 啓用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 從assets目錄下面的加載html
contentWebView.loadUrl("file:///android_asset/wst.html");
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(btnClickListener);
contentWebView.addJavascriptInterface(this, "wst");
}
OnClickListener btnClickListener = new Button.OnClickListener() {
public void onClick(View v) {
// 無參數調用
contentWebView.loadUrl("javascript:javacalljs()");
// 傳遞參數調用
contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
}
};
public void startFunction() {
Toast.makeText(this, "js調用了java函數", Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
msgView.setText(msgView.getText() + "\njs調用了java函數");
}
});
}
public void startFunction(final String str) {
Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
msgView.setText(msgView.getText() + "\njs調用了java函數傳遞參數：" + str);
}
});
}
}

佈局文件

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="9" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/msg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="text" />
</ScrollView>
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="java調用js函數" />
</LinearLayout>

但願對你們有所幫助

資源下載地址

http://download.csdn.net/download/wangtingshuai/5106571 android

==================================================================================================================== web

結尾總結幾句： app

一、webview load網頁時，native code能和網頁中的js相互交互並傳遞參數（一個參數）。 ide

二、js調用native code那部分一會兒可能看得不是很明白，這裏整理一下：函數

//native code方面
//使用addJavascriptInterface綁定「wst」
contentWebView.addJavascriptInterface(this, "wst");
…

//添加須要響應的方法，注意必須爲public
public void startFunction(final String str) {  
        Toast.makeText(this, "js調用了java函數", Toast.LENGTH_SHORT).show();  
        runOnUiThread(new Runnable() {  
  
            @Override  
            public void run() {  
                msgView.setText(msgView.getText() + "\njs調用了java函數");  
  
            }  
        });  
    }



//js方面
<a onClick="window.wst.startFunction('hello world')" >點擊調用java代碼並傳遞參數</a>