在Android開發中，越來越多的商業項目使用了Android原生控件與WebView進行混合開發，當然不僅僅就是顯示一個WebView那麼簡單，有時候還需要本地Java代碼與HTML中的JavaScript進行交互，Android也對交互做了很好的封裝，所以很容易實現例如：點擊網頁中的按鈕Android調用原生對話框，點擊網頁中的電話號碼調用Android撥號APP。這篇給大家介紹下如何實現Android與HTML+JS的交互。
有的人可能不理解什麼是javascript，可以簡單理解爲它在HTML中的作用就相當於你在java中寫的函數（方法）差不多。
本篇主要實現的功能點：
- Android 調用HTML中的javascript腳本
- HTML中的javascript腳本調用Android本地代碼
- Android 調用HTML中的javascript腳本並傳遞參數
- HTML中的javascript腳本調用Android本地代碼並傳遞參數
實現Android調用JS腳本是非常簡單的，直接Webview調用loadUrl方法，裏面是JS的方法名，並可以傳入參數，javascript：xxx()方法名需要和JS方法名相同
contentWebView.loadUrl("javascript:javacalljs()");- 1
- 1
HTML代碼
實現JS調用Android方法，需要在Java代碼中添加下面這句，webview綁定javascriptInterface，js腳本通過這個接口來調用java代碼， 第一個參數是自定義類對象，映射成JS對象，這裏我直接傳this，第二個參數是別名，JS腳本通過這個別名來調用java的方法，這個別名跟HTML代碼中也是對應的。
contentWebView.addJavascriptInterface(MainActivity.this,"android");- 1
- 1
HTML代碼
先看一下效果圖，上面是2個原生Button View 下面是一個WebView
下面是具體的實現步驟：
先建立一個HTML文件，很簡單，裏面主要有兩個按鈕，兩個JS方法
<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 javacalljswith(arg){
document.getElementById("content").innerHTML =
("<br\>"+arg);
}
</script>
</head>
<body>
HTML 內容顯示 <br/>
<h1><div id="content">內容顯示</div></h1>
<br/>
<input type="button" value="點擊調用java代碼" onclick="window.android.startFunction()" />
<br/>
<input type="button" value="點擊調用java代碼並傳遞參數" onclick="window.android.startFunction('http://blog.csdn.net/Leejizhou')" />
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
需要把這個HTML文件放到assets文件夾中 注意文件夾位置
添加權限
<uses-permission android:name="android.permission.INTERNET"/>- 1
- 1
佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
/>
<Button
android:id="@+id/button"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="調用JS"
android:background="@color/colorAccent"
android:textColor="#ffffff"
/>
<Button
android:id="@+id/button2"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="調用有參JS"
android:background="@color/colorAccent"
android:textColor="#ffffff"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WebView"
android:layout_marginTop="8dp"
/>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
Activity 的java類
public class MainActivity extends AppCompatActivity {
private WebView contentWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contentWebView = (WebView) findViewById(R.id.webview);
// 啓用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 從assets目錄下面的加載html
contentWebView.loadUrl("file:///android_asset/web.html");
contentWebView.addJavascriptInterface(MainActivity.this,"android");
//Button按鈕 無參調用HTML js方法
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 無參數調用 JS的方法
contentWebView.loadUrl("javascript:javacalljs()");
}
});
//Button按鈕 有參調用HTML js方法
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 傳遞參數調用JS的方法
contentWebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");
}
});
}
//由於安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
//JS調用Android JAVA方法名和HTML中的按鈕 onclick後的別名後面的名字對應
@JavascriptInterface
public void startFunction(){
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this,"show",3000).show();
}
});
}
@JavascriptInterface
public void startFunction(final String text){
runOnUiThread(new Runnable() {
@Override
public void run() {
new AlertDialog.Builder(MainActivity.this).setMessage(text).show();
}
});
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
Ok 這樣一個簡單的Android與HTML+JS的交互就完成了，有什麼問題也可以在下方留言。