html5與安卓native互動，相互呼叫

阿新 • • 發佈：2019-01-13

轉發自http://blog.csdn.net/a38017032/article/details/47700325

WebView的使用

WebView是Android中的一個類，主要是用來承載網頁的資訊。WebView中比較重要的資訊有三個類：WebChromeClient、WebViewClient和WebSettings。

1.WebChromeClient：輔助WebView處理Javascript的對話方塊，載入進度條，網站圖示，網站title等等。
(1)onProgressChanged(WebView view,int newProgress)，通知現在的html載入的進度。
(2)onReceivedTitle(WebView view,String title)，通知現在的title。
(3)onReceivedIcon(WebView view,Bitmap icon)，通知現在的icon圖示。
(4)onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)，通知現在的icon的url。
(5)onJsPrompt(WebView iew,String url,String message,String defaultValue,JsPromptResult result)，html通過js呼叫prompt的時候就會呼叫這個函式。
(6)onJsAlert(WebView view,String url,String message,JsResult result)， html通過js呼叫alert的時候就會呼叫這個函式。
(7)onJsConfirm(WebView view, String url, String message,JsResult result)，html通過js呼叫confirm的時候就會呼叫。
(8)…
2.WebViewClient

：幫助WebView處理各種通知、請求事件等等。
(1)shouldOverrideUrlLoading(WebView view,String url)，當點選html中的含有具有跳轉資訊的內容時都會回撥這個函式，告訴跳轉的url。
(2)onPageStart(WebView view,String url,Bitmap favicon)，當webview開始載入html的時候就會回撥這個函式。
(3)onPageFinish(WebView view,String url)，當webview載入完html的時候就會回撥這個函式。
(4)…
3.WebSettings：用來設定WebView的一些屬性。
(1)setJavaScriptEnable(boolean flag)，是否支援javascript。
(2)setSupportZoom(boolean support)，是否支援縮放。
(3)…
4.重要的方法
(1)loadUrl(String url)，載入一個url的資訊到WebView。
(2)loadUrl(String url,Map< String,String> additionalHttpHeader)，載入一個url，並且帶上一些url。
(3)loadData(String data, String mimeType, String encoding)，用來給WebView載入資料。
(4)loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)，用來給WebView載入資料。
(5)addJavascriptInterface(Object object,String name)，將定義了回撥方法的物件object注入到webview中，這個時候webview中就可以通過name來呼叫native中的方法。

Html5載入Javascript的過程

在學會了使用WebView以後還需要適當的瞭解一下Javascript程式碼是如何載入到Html5中的，難道僅僅是< script >標籤就能將js的程式碼載入嗎？顯然不是。html5載入的時候是從上往下載入的，如果碰到js的程式碼或者碰到js的標籤，會通過Javascript解釋引擎載入進來，Javascript解釋引擎是瀏覽器的一部分。當Javascript程式碼執行的時候，會將相應的部分在渲染一次。

Native與Html5的互動方法

在大概的瞭解了WebView的時候，以及Html5的相關的知識以後就可以來看看如何的讓Native與Html5的互動。（現在很多的Native應用都會巢狀一些Html5的頁面在裡面，方便一些業務方面的）
Native跳轉到Html5

的方式只有一種就是通過load的方式。
上面介紹WebView時候時的loadUrl、loadData和loadDataWithBaseURL都能在Native中載入Html5的介面。這裡面也可以只加載部分分Javascript的程式碼。
Html5跳轉到Native的方式則有比較多的方式。
不使用js sdk時的互動
(1)shouldOverrideUrlLoading，當點選WebView中承載過類似href的某個介面的時候。就會回撥這個方法。將需要處理的邏輯寫在shouldOverrideUrlLoading裡面就行。

webview.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);
        // doSomething
    }
});

(2)onJsPrompt(),onJsAlert()和onJsConfirm()，在html中設定prompt(),alert(),confirm()，點選的時候就會回撥到這些方法中。

<html>
    <body>
        <a href="javascript:prompt()">hello</a>
        <a href="javascript:alert()">haha</a>
        <a href="javascript:confirm()">gala</a>
    </body>
</html>

當分別點選的時候就會回撥到Native中。分別在裡面做處理就行。

webview.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsPrompt(WebView view, String url, String message,
            String defaultValue, JsPromptResult result) {
        // doSomething
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
    @Override
    public boolean onJsAlert(WebView view, String url, String message,
                    JsResult result) {
        // doSomething
        return super.onJsAlert(view, url, message, result);
    }
    @Override
    public boolean onJsConfirm(WebView view, String url,
                    String message, JsResult result) {
        // doSomething
        return super.onJsConfirm(view, url, message, result);
    }               
});

使用js sdk時的互動
通過前面介紹WebView的時候，可以通過addJavascriptInterface()，將native端的方法注入到WebView中，這樣就可以通過一個name在html中呼叫native。
將Object注入到WebView，識別符號號是egos。

webview.addJavascriptInterface(new Object(){
    @JavascriptInterface
    public void hello(String name){
        Toast.makeText(WebViewTest.this, name, Toast.LENGTH_SHORT).show();
    }
}, "egos");

在html中使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <script type="text/javascript">
    function test(){
        if(egos){
            egos.hello("egos");
        }
    }
    </script>
    </head>
    <body>
        <button onclick="javascript:test()">hello</button>
        <a href="javascript:test()">hello</a>
    </body>
</html>

點選以後就會彈出Toast。

使用js sdk的優勢以及劣勢
優勢

1.對Javascript程式碼單獨的書寫，方便專案的開發和維護。
2.方便應用的更新，WebView的更新只需要後臺的更新就行不需要移動端還做處理。

劣勢

使用addJavascriptInterface()在Android 17一下會有一個漏洞，使用起來不安全。在上面的程式碼中會發現hello(String name)上面加了一個@JavascriptInterface，這個是在Android 17以後處理這個漏洞的方法。在Android 17以後，想要安全的處理這個漏洞，肯定是不能再使用addJavascriptInterface()這個方法，現在可以使用的是前面的showOverrideUrlLoading()，或者是通過onJsPrompt(),onJsAlert()和onJsConfirm()這些方法。上面都有介紹。

html5與安卓native互動，相互呼叫

html5與安卓native互動，相互呼叫

Unity接入高德定位sdk簡單三步無需與安卓工程互動

Unity3d與安卓的互動1.0

U3D & AS丨Unity與安卓的互動

webapp js與安卓，ios怎麼互動

安卓混淆之後，android與js互動異常原因

安卓的進化，用戶的陣痛？從奧利奧與奧利粵說起

unity接入安卓SDK,與安卓相互通訊

與安卓互動

安卓適配，px與dp兩種適配方法

vue實現與安卓、IOS互動

Unity與安卓互動之拍照與相簿

unity3d與安卓的資訊互動遇到的一些問題

React-Native與安卓原生的混合開發

mac下搭建安卓native開發環境（供rn使用），及rn相關命令

STM32F4+WIFI模組TCP連結伺服器，伺服器與安卓客戶端Websocket長連結；實現監控資訊實時推送。

React Native 沉浸式標題欄與安卓全面屏適配

html5 ios與安卓的一些差異性問題

安卓 native 和 H5 的互動

SpringMVC與安卓之間的互動1

html5與安卓native互動，相互呼叫

相關推薦