通過本文我們將了解到:

1.android 如何通過webView加載網(wǎng)頁
2.android 如何調(diào)用加載的網(wǎng)頁中的js方法
3.js代碼中如何調(diào)用android里的方法
4.android中如何攔截js點擊事件

在學(xué)習(xí)之前首先要了解一丟丟的html和js的知識

一 : (如何通過webView加載網(wǎng)頁)

webView是google提供的一個加載網(wǎng)頁的官方控件
通過loadUrl()方法注入需要加載的網(wǎng)頁
因為HTML文件的位置有可能在服務(wù)器,有可能在本地所以加載的url也不同

  例:
     mWebView.loadUrl("file:///android_asset/test.html");//加載本地assets目錄下html文件
     mWebView.loadUrl("http://www.baidu.com");//  加載網(wǎng)頁

如果你只是這樣寫的話,不出意外的,手機肯定就自動打開某個默認瀏覽器來加載網(wǎng)頁了,可是我們希望的是通過我們手機內(nèi)部的webView來加載:
這時我們就得通過

mWebView.setWebViewClient()

方法來設(shè)置一個webView代理,可以理解為,我們要通過webView這個代理來加載網(wǎng)頁了,不需要默認瀏覽器了.
在參數(shù)中我們new一個代理

mWebView.setWabViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {               
         //見名知意     將要重寫url的加載過程
            view.loadUrl(url);   //-->通過webView來加載url
            return true;
        }
    });

這樣一來就可以通過webView來加載界面了

二 : (android 如何調(diào)用加載的網(wǎng)頁中的js方法)

如果想讓webView調(diào)用js中的方法,首先要讓webView支持使用js

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);

設(shè)置完成之后就可以調(diào)用js中的方法了

注意 :

 UsingsetJavaScriptEnabled
can introduce XSS vulnerabilities 
 into you application, review carefully. 
 Your code should not invokesetJavaScriptEnabled
if you are 
 not sure that your app really requires JavaScript support.

這里說如果支持了js可能會遭到XSS攻擊

1.有返回值的調(diào)用

mWebView.evaluateJavascript(String s,ValueCallback<T> callback)//-->通過這個方法調(diào)用js方法

這個方法中需要兩個參數(shù), s 為js方法調(diào)用的拼接,比如說我們要調(diào)用js中的
sum(a,b)方法來求a和b的和
s就應(yīng)該寫作 "sum(a,b)"-->其中的a和b可以通過別的方式獲取

第二個參數(shù)就是js方法的回調(diào),ValueCallback的泛型為方法返回值類型

2.沒有返回值的調(diào)用

如果說我們調(diào)用的js方法沒有返回值,就不用這么麻煩了
可以直接調(diào)用

mWebView.loadUrl("javascript:do()")

js中的代碼是這樣:

<script>
      function do(){
      ******
       }
</script>

注意:方法名要一致

練習(xí) : 點擊一個按鈕,利用js中的方法求出兩數(shù)之和并返回通過textView展示

public void useJs(View view) {
    //使用js中的方法
    mWebView.evaluateJavascript("sum(30,50)", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            tv.setText("JS代碼中sum()方法計算30+50的結(jié)果為 : " + s);
        }
    });
}

三 : (js代碼中如何調(diào)用android里的方法)

app中的代碼很簡單
android4.2以后可以直接使用@JavascriptInterface注解來聲明js方法了

public class JsMethods {
    @JavascriptInterface
    public String show() {
        return "成功調(diào)用android中的方法";
    }
}

這段代碼中,show()方法直接返回了一串字符串
創(chuàng)建完JsMethods之后,我們需要給webView添加一個可以使用android代碼的接口

mWebView.addJavascriptInterface(new JsMethods (), JS_NAME);
//      public static final String JS_NAME = "android";

這里JS_NAME是一個字符串常量,作為連接js和android的一個通道,
將需要交互的方法封裝在JsMethods 實例化的對象中,添加到webView中供其使用.

js部分,就是通過JS_NAME這個通道來獲取其中的方法 :

<script type="text/javascript">
    function android_method() {
        // body...
        var value = window.android.show();
        document.getElementById('p').innerHTML = value;
    }
</script>

注意 : window.android.show(); --> 這里的android是可變的,但是要與mWebView中設(shè)置的通道名兒一致,否則找不到需要的方法

四 : (android中如何攔截js點擊事件)

如果我們想獲取網(wǎng)頁中的一些鏈接,可以在開頭提到的shouldOverrideUrlLoading()方法中進行攔截

比如在我們的test.html中有一個鏈接是跳轉(zhuǎn)百度的,我們不想讓它跳轉(zhuǎn),同時我們還要獲取到他跳轉(zhuǎn)的url

 mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.contains("baidu")) {
                Toast.makeText(MainActivity.this, "攔截界面跳轉(zhuǎn)成功", Toast.LENGTH_SHORT).show();
                tv.setText("攔截到的url為 : " + url);
            } else {
                view.loadUrl(url);
            }
            return true;
        }
    });

后話 :

關(guān)于webview的更多api:
api

關(guān)于demo的完整代碼:

完整代碼