Android之webview与js交互
對(duì)于android初學(xué)者應(yīng)該都了解webView這個(gè)組件。之前我也是對(duì)其進(jìn)行了一些簡單的了解，但是在一個(gè)項(xiàng)目中不得不用webview的時(shí)候，發(fā)現(xiàn)了webview的強(qiáng)大之處，今天就分享一下使用webview的一些經(jīng)驗(yàn)。
?
1、首先了解一下webview。
webview介紹的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
從上面你應(yīng)該了解到了基本功能，也就是顯示網(wǎng)頁。之所以我說webview功能強(qiáng)大是因?yàn)樗蚸s的交互非常方便，很簡單就可以實(shí)現(xiàn)。
?
2、webview能做什么？
①webView可以利用html做界面布局，雖然目前還比較少人這么使用，不過我相信當(dāng)一些客戶端需要復(fù)雜的圖文（圖文都是動(dòng)態(tài)生成）混排的時(shí)候它肯定是個(gè)不錯(cuò)的選擇。
②直接顯示網(wǎng)頁，這功能當(dāng)然也是它最基本的功能。
③和js交互。（如果你的js基礎(chǔ)比java基礎(chǔ)好的話那么采用這種方式做一些復(fù)雜的處理是個(gè)不錯(cuò)的選擇）。
?
3、如何使用webview？
這里直接用一個(gè)svn上取下的demo，先上demo后講解。demo的結(jié)構(gòu)圖如下：
WebViewDemo.java
package com.google.android.webviewdemo;import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView;/*** Demonstrates how to embed a WebView in your activity. Also demonstrates how* to have javascript in the WebView call into the activity, and how the activity * can invoke javascript.* <p>* In this example, clicking on the android in the WebView will result in a call into* the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code* will turn around and invoke javascript using the {@link WebView#loadUrl(String)}* method.* <p>* Obviously all of this could have been accomplished without calling into the activity* and then back into javascript, but this code is intended to show how to set up the * code paths for this sort of communication.**/ public class WebViewDemo extends Activity {private static final String LOG_TAG = "WebViewDemo";private WebView mWebView;private Handler mHandler = new Handler();@Overridepublic void onCreate(Bundle icicle) {super.onCreate(icicle);setContentView(R.layout.main);mWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = mWebView.getSettings();webSettings.setSavePassword(false);webSettings.setSaveFormData(false);webSettings.setJavaScriptEnabled(true);webSettings.setSupportZoom(false);mWebView.setWebChromeClient(new MyWebChromeClient());mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");mWebView.loadUrl("file:///android_asset/demo.html");}final class DemoJavaScriptInterface {DemoJavaScriptInterface() {}/*** This is not called on the UI thread. Post a runnable to invoke* loadUrl on the UI thread.*/public void clickOnAndroid() {mHandler.post(new Runnable() {public void run() {mWebView.loadUrl("javascript:wave()");}});}}/*** Provides a hook for calling "alert" from javascript. Useful for* debugging your javascript.*/final class MyWebChromeClient extends WebChromeClient {@Overridepublic boolean onJsAlert(WebView view, String url, String message, JsResult result) {Log.d(LOG_TAG, message);result.confirm();return true;}} }
demo.html
<html><script language="javascript">/* This function is invoked by the activity */function wave() {alert("1");document.getElementById("droid").src="android_waving.png";alert("2");}</script><body><!-- Calls into the javascript interface for the activity --><a onClick="window.demo.clickOnAndroid()"><div style="width:80px;margin:0px auto;padding:10px;text-align:center;border:2px solid #202020;" ><img id="droid" src="android_normal.png"/><br>Click me!</div></a></body> </html>
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/intro"android:padding="4dip"android:textSize="16sp"/><WebViewandroid:id="@+id/webview"android:layout_width="fill_parent" android:layout_height="0dip"android:layout_weight="1"/></LinearLayout>
4、如何交互？
①android如何調(diào)用js。
調(diào)用 形式：
mWebView.loadUrl("javascript:wave()");其中wave（）是js中的一個(gè)方法，當(dāng)然你可以把這個(gè)方法改成其他的方法，也就是android調(diào)用其他的方法。
②js如何調(diào)用android。
調(diào)用形式：
<a onClick="window.demo.clickOnAndroid()"> 代碼中的“demo”是在android中指定的調(diào)用名稱，即mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
代碼中的clickOnAndroid()是“demo”對(duì)應(yīng)的對(duì)象：new?DemoJavaScriptInterface() 中的一個(gè)方法。
③雙向交互。
當(dāng)然是把前面的兩種方式組合一下就可以了。
?
5、講解demo。
現(xiàn)在你一定了解了android和js的交互了。是時(shí)候分析一些demo了，根據(jù)上面講的你也應(yīng)該比較清楚了。具體交互流程如下：
①點(diǎn)擊圖片，則在js端直接調(diào)用android上的方法clickOnAndroid()；
②clickOnAndroid()方法（利用線程）調(diào)用js的方法。
③被②調(diào)用的js直接控制html。
總結(jié)
以上是生活随笔為你收集整理的Android之webview与js交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android之Gradle Plugi
- 下一篇： Android之DiskLruCache