Android教程網 >> Android技術 >> 關於Android編程 >> Android WebView上實現JavaScript與Java交互

Android WebView上實現JavaScript與Java交互

編輯：關於Android編程

其實webview加載資源的速度並不慢,但是如果資源多了,當然就很慢。圖片、css 、js 、html這些資源每個大概需要10-200ms ,一般都是30ms就ok了。不過webview是必須等到全部資源都完成加載,才會進行渲染的,所以加載的速度很重要!從Google上我們了解到,webview加載頁面的順序是:先加載html,然後從裡面解析出css、js文件和頁面上的圖片資源進行加載。如果webkit的緩存裡面有,就不加載。加載完這些資源之後,就進行css的渲染和js的執行。Css的渲染一般不需要很長時間,幾十毫秒就ok。關鍵是js的執行,如果用了jQuery,則執行起來需要5-6秒。而在這段時間,如果不在webview裡設置背景,網頁部分是白色的,很難看。這是一個很糟糕的用戶體驗。所以#歐#柏泰#克建議如果用網頁布局程序,最好別用那些龐大的js框架。最好使用原生的js寫業務腳本,以提升加載速度,改善用戶體驗。

在混合開發中，有時會用到安卓原生SDK，如調用相機、查看相冊、錄音等，這就需要web頁面中的JavaScript能調用到安卓SDK接口。由於Android的WebView是基於webkit內核的，集成了js與java互調的接口函數，可以方便地進行開發使用。

界面布局xml：

<RelativeLayout 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" >
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout"
/>
<LinearLayout 
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java調用JavaScript接口"
>
</Button>
</LinearLayout>
</RelativeLayout>

java代碼：

private WebView webView;
private Handler handler = new Handler();
private Button button;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
//自定義webView設置
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyJavaScriptInterface(MainActivity.this), "javaInterface");
//如果注釋了，javaScript中的alert彈窗等就會失效，不顯示
webView.setWebChromeClient(new WebChromeClient());
//webView.setWebChromeClient(new MyWebChromeClient());
//測試webView加載是否正常
//webView.loadUrl("http://www.baidu.com/");
webView.setWebViewClient(new HelloWebView());
webView.loadUrl("file:///android_asset/index.html");
button = (Button) findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
private class HelloWebView extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
} 
}
/**
* 在主線程中定義JavaScript可以調用的安卓接口
* @author CHQ
* API 以後，每個被調用java函數都要叫聲明 @JavascriptInterface
*/
public class MyJavaScriptInterface{
private Context context;
public MyJavaScriptInterface(Context context){
this.context = context;
}
@JavascriptInterface
public String toString() {
return "this is interface";
}
@JavascriptInterface
public void clickOnAndroid() {
Toast.makeText(context, "js調用安卓：....", Toast.LENGTH_SHORT).show();
}
/**
* 安卓調用JS接口，要開啟子線程調用
*/
@JavascriptInterface
public void call() {
Toast.makeText(context, "安卓客戶端再調用JavaScript接口", Toast.LENGTH_SHORT).show();
handler.post(new Runnable() { 
@Override
public void run() {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
}

其中：有幾點必須注意的，網上早期關於WebView的描述中，有幾點變化。1）安卓4.2以上的版本中使用WebView實現Java與Js互調，java接口需要聲明@JavascriptInterface ; 2）WebView要調用setWebChromeClient()，以適應Js等彈窗等實現；3）addJavascriptInterface中綁定的接口中調用JavaScript接口，需要開啟子線程來調用（報錯：Caused by: java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. ）；

HTML代碼：

<html>
<script type="text/javascript">
//安卓定義的接口1
function callAndroidInterface() {
window.javaInterface.clickOnAndroid();
}
//
function showTitle(param) {
alert("傳參："+param);
var x = document.getElementById("title");
alert("標題："+x.innerHTML);
}
</script>
<body>
<h3 id="title">關於安卓與JavaScript的交互</h3>
<input type="button" value="調用接口1" onclick="callAndroidInterface()"></input> 
<input type="button" value="測試接口可用性" onclick="showTitle('aa')"></input> 
<input type="button" value="調用接口2" onclick="window.javaInterface.call()"></input>
</body>
</html>

以上html文件，其中javaInterface就是webView中addJavacriptInterface()方法中注入的接口入口名稱，通過該名稱就可以直接調用Java中的接口。（該html頁面需要保持到項目assets目錄中，由webView.loadUrl("file:///android_asset/index.html")來加載）;

效果圖：

其中，對話框彈出：網址為"file://"的網頁顯示：,如果是服務器上的web頁面就會顯示源IP地址等等，顯然不是我們想要的。下一篇，我們可以重寫WebChromeClient來修改對話框、確認框等webView的優化。

以上內容是針對Android WebView上實現JavaScript與Java交互的全部內容，希望對大家有所幫助！

上一頁:Android實現學生管理系統
下一頁:20.5 語音合成（百度2016年2月29日發布的tts引擎）

關於Android編程

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章