android軟體開發之webView.addJavascriptInterface迴圈漸進【一】
阿新 • • 發佈：2019-02-01
程式碼
由於這裡是第一階段的webView所我就寫個最簡單的文章，這樣大家可以迴圈漸進的來了解addJavascriptInterface這句話是怎麼用的。
在這裡我們引用Google的一個事例下面是我Google給提供的一個dome的地址：點選開啟連結
我們先看它的HTML檔案，HTML的檔案路徑是在：點選開啟連結
他的程式碼為：
由於這裡是第一階段的webView所我就寫個最簡單的文章，這樣大家可以迴圈漸進的來了解addJavascriptInterface這句話是怎麼用的。
在這裡我們引用Google的一個事例下面是我Google給提供的一個dome的地址：點選開啟連結
我們先看它的HTML檔案，HTML的檔案路徑是在：點選開啟連結
他的程式碼為：
<html> <script language="javascript"> /* This function is invoked by the activity */ /* 這個函式被Activity呼叫的活動 這裡的圖片我們可以在它的連線裡面下載 android_waving.png */ function wave() { /* 這裡是一個javascript 自定義函式，這是由我們在android的程式裡呼叫的，不在在HTML中呼叫*/ document.getElementById("droid").src="android_waving.png"; } </script> <body> <!-- Calls into the javascript interface for the activity --> <!-- 從HTML檔案中呼叫activity中的函式 --> <!-- 也就是從HTML到android程式 留意window.demo.clickOnAndroid()這句話 --> <a onClick="window.demo.clickOnAndroid()"><div style="width:80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #202020;" > <!-- 圖片預設的為 android_normal.png --> <img id="droid" src="android_normal.png"/><br> Click me! </div></a> </body> </html>
這裡我做了註釋,可能你會看不懂，沒有關係，下面我們就再看的activity的程式碼吧。點選開啟連結
由於他的原始碼比較長，我就不多全部都貼進來了，我只貼一下重要的部分就好了…….貌似都重要，還是全貼吧
這裡我也做了註釋，在這裡他在他的類中定義了一個 的函式，我記不記得我們在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 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); // 下面的一句話是必須的，必須要開啟javaScript不然所做一切都是徒勞的 webSettings.setJavaScriptEnabled(true); webSettings.setSupportZoom(false); mWebView.setWebChromeClient(new MyWebChromeClient()); // 看這裡用到了 addJavascriptInterface 這就是我們的重點中的重點 // 我們再看他的DemoJavaScriptInterface這個類。還要這個類一定要在主執行緒中 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo"); mWebView.loadUrl("file:///android_asset/demo.html"); } // 這是他定義由 addJavascriptInterface 提供的一個Object final class DemoJavaScriptInterface { DemoJavaScriptInterface() { } /** * This is not called on the UI thread. Post a runnable to invoke * 這不是呼籲介面執行緒。發表一個執行呼叫 * loadUrl on the UI thread. * loadUrl在UI執行緒。 */ public void clickOnAndroid() { // 注意這裡的名稱。它為clickOnAndroid(),注意，注意，嚴重注意 mHandler.post(new Runnable() { public void run() { // 此處呼叫 HTML 中的javaScript 函式 mWebView.loadUrl("javascript:wave()"); } }); } } // 線下的程式碼可以不看，除錯用的 /////////////////////////////////////////////////////////////////////////////////////////////////// /** * Provides a hook for calling "alert" from javascript. Useful for * 從javascript中提供了一個叫“提示框” 。這是很有用的 * debugging your javascript. * 除錯你的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; } } }
HTML中看到的
window.demo.clickOn()這句話。如果忘記了就翻上去再看一下，特別是我說注意的地方。是的，這裡的
clickOnAndroid() 是我們android程式中的一個函式。可能你會問那.為什麼是windows.demo.這裡demo我們可以看到在mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");這句話 中後面它加了一個demo這個字元.我可以理解成 addJavascriptInterface 的前一個引數為HTML中的一個方法，當然我更喜歡說他為函式。demo就是個物件…呵呵，我對這也不是怎麼的熟悉。至於這個window我也不知道是為什麼我只知道這樣寫程式就可以正確的執行，如果你知道這是什麼那麼請你在下面的留言版裡告訴我一下好嗎？
現在知道怎麼在HTML中怎麼呼叫Android程式的一個方法了吧。其實就是這這麼的簡單，不過demo這個字元我沒有試他是不是區分大小寫。如果你有興趣那麼你可以去試一下它有沒有區分大小寫。知道了怎麼樣從HTML中怎麼樣呼叫Android中的方法，下面我就再研究一下，它是怎麼樣從Android到HTML的吧。其實這個很簡單，只要使用
mWebView.loadUrl("javascript:wave()");這句話就可以了。 這樣我主解讀完Google給我提供的一個demo了。下面就是讓我來試一下吧，試試他的這個demo吧，因為人家給提供了原始碼，所以我就不貼的啦，大家把他的原始碼貼上去就可以實現這個啦
在下一集裡我將會帶領大家來怎麼使用 addJavascriptInterface 怎麼樣從一個JavaScript 的函式中獲得一個返回值。文章內容不多，還請見諒