webView.addJavascriptInterface 用法

銳湃發表於2015-12-11
WebViewJavaScript

在這裡我們引用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;
        }
    }
}

這裡我也做了註釋，在這裡他在他的類中定義了一個 clickOnAndroid() 的函式，我記不記得我們在HTML中看到的window.demo.clickOnAndroid()這句話。如果忘記了就翻上去再看一下，特別是我說注意的地方。是的，這裡的 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 的函式中獲得一個返回值。文章內容不多，還請見諒

轉載請註明：Sollyu部落格 » android軟體開發之webView.addJavascriptInterface迴圈漸進【一】




相關文章