Android小知識-WebView的Java和JavaScript互動
目前市面上的大部分APP都是混合開發，也就是大家所說的Hybrid方式，集成了Native和Web的優點，使用native可以保證使用者的體驗，使用Web可以使得APP具有動態更新的能力，同時有利於跨平臺開發，節省人力物力。平時在使用Hybrid時主要就是實現Java和JavaScript的互動。
例子一：Java呼叫JavaScript
首先我們建立一個toJavaScript.htm的檔案，並複製到工程的assets目錄下，在toJavaScript.html檔案中填寫以下內容：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> 這是html <script language="javascript"> function showToast(){ alert("Java呼叫JavaScript"); } </script> </html>
html檔案中很簡單，只定義了一個showToast方法，執行該方法會彈出一個框。
接著我們在MainActivity中新增呼叫JavaScript方法的程式碼：
mWebView = findViewById(R.id.wv_web_view); WebSettings settings = mWebView.getSettings(); //使用JavaScript settings.setJavaScriptEnabled(true); mWebView.setWebChromeClient(new WebChromeClient()); mWebView.loadUrl("file:///android_asset/toJavaScript.html"); Button buttonGet = findViewById(R.id.btn_get); buttonGet.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebView.loadUrl("javascript:showToast()"); } });
點選按鈕會呼叫showToast方法並顯示彈框。
例子二：JavaScript呼叫Java
實現JavaScript呼叫Java方式，我們可以按照以下三步驟：
-
呼叫與WebView關聯的WebSettings例項的setJavaScriptEnabled方法來使用JavaScript指令碼呼叫的功能。
-
呼叫WebView的addJavascriptInterface方法將應用的Java物件暴露給JavaScript。
-
在JavaScript中呼叫步驟二暴露出來的Java物件的方法。
暴露給JavaScript的Java物件如下：
package com.apk.administrator.loadapk;
import android.webkit.JavascriptInterface;
public class JavaBean {
private HtmlCallback mCallback;
JavaBean(HtmlCallback callback){
this.mCallback=callback;
}
@JavascriptInterface
public void setName(String name){
if(mCallback!=null){
mCallback.name(name);
}
}
public interface HtmlCallback{
void name(String name);
}
}
在JavaScript呼叫JavaBean物件的setName方法時提供了一個回撥。
接著在MainActivity中初始化我們的WebView：
private void initWebView(){
mWebView = findViewById(R.id.wv_web_view);
WebSettings settings=mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/toJava.html");
mJavaBean=new JavaBean(new JavaBean.HtmlCallback() {
@Override
public void name(String name) {
Toast.makeText(MainActivity.this,name,Toast.LENGTH_SHORT).show();
}
});
mWebView.addJavascriptInterface(mJavaBean,"javaBean");
}
最後就是toJava.html檔案了：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<input type="button" value="設定姓名" onclick="javaBean.setName('顧林海');" />
</html>
Html頁面上就只有一個按鈕，點選按鈕呼叫JavaBean的setName方法並把引數傳遞過去。點選的同時，APP顯示一個Toast。
在Android4.2之前還沒有@JavascriptInterface註解，這樣的話會引起臭名昭著的WebView遠端程式碼執行漏洞，從Android4.2開始，Google修復了這個漏洞，就是在暴露給JavaScript呼叫的Java物件的方法上新增@JavascriptInterface註解。
如果為了相容Android4.2以下的版本，就不要再使用addJavascriptInterface這種方式，可以通過Android的WebChromeClient類，其中onJsPrompt方法會傳遞過來一個String型別的字串，APP端和Web端約定好協議，通過該方法完成JavaScript呼叫Java方法。
掃碼_搜尋聯合傳播樣式-標準色版.png
Android、Java、Python、Go、PHP、IOS、C++、HTML等等技術文章，更有各種書籍推薦和程式員資訊，快來加入我們吧！關注技術共享筆記。
838794-506ddad529df4cd4.webp.jpg
搜尋微信“顧林海”公眾號，定期推送優質文章。