Android與HTML+JS交互
在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()");
HTML代碼
實現JS調用Android方法，需要在Java代碼中添加下面這句，webview綁定javascriptInterface，js腳本通過這個接口來調用java代碼， 第一個參數是自定義類對象，映射成JS對象，這里我直接傳this，第二個參數是別名，JS腳本通過這個別名來調用java的方法，這個別名跟HTML代碼中也是對應的。
contentWebView.addJavascriptInterface(MainActivity.this,"android");
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>
需要把這個HTML文件放到assets文件夾中 注意文件夾位置
添加權限
<uses-permission android:name="android.permission.INTERNET"/>
布局文件
<?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>
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();
}
});
}
}
Ok 這樣一個簡單的Android與HTML+JS的交互就完成了
來源：http://blog.csdn.net/leejizhou/article/details/50894531
源碼下載地址 http://download.csdn.net/download/leejizhou/9461804