android中webview控件和javascript交互實例

時間 2019-11-18

標籤 android webview 控件 javascript 交互實例欄目 Android 简体版

原文原文鏈接

當咱們要實現豐富的圖文混排效果的時候，咱們通常會使用webview，這是一個功能十分強大的的控件，來看看官方的解釋：javascript

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.java

一個能顯示網頁內容的View。該類是你實現一個本身的瀏覽器，或者只是在activity中顯示網頁內容的基礎；它基於WebKit內核來顯示網頁，而且包含了實現先後翻頁、放大縮小，文字搜索方法。android

從上面你應該瞭解到了基本功能，也就是顯示網頁。這篇文章中咱們主要討論webview和Javascript的交互。若是你的js基礎比java基礎好的話那麼採用這種方式作一些複雜的處理是個不錯的選擇。web

WebView和js的交互包含兩方面，一是在html中經過js調用安卓的java代碼；二是在安卓java代碼中調用js。瀏覽器

1、html中經過js調用java代碼安全

js中調用java代碼其實就記住一點，webview設置一個和js交互的接口（注意這裏只是通常的意思，並非java中接口的含義），這個接口實際上是一個通常的類，同時爲這個接口取一個別名。這個過程以下：
app

複製代碼代碼以下:ide

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");函數

new DemoJavaScriptInterface就是這個接口，demo就是這個接口的別名。
上面的代碼執行以後在html的js中就能經過別名（這裏是「demo」）來調用newDemoJavaScriptInterface類中的任何方法。

如咱們想讓html中的一個button點擊以後調用java中的函數能夠這樣：

複製代碼代碼以下:

可是由於安全問題，在Android4.2中(若是應用的android:targetSdkVersion數值爲17+)JS只能訪問帶有 @JavascriptInterface註解的Java函數。所以若是你的開發版本比較高，須要在被調用的函數前加上@JavascriptInterface註解。

下面是谷歌給出的代碼示例：
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();
@Override
public 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 {
@Override
public 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>

<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>