html5与安卓native交互，相互调用

来源：互联网发布：淘宝代充平台编辑：程序博客网时间：2024/06/04 17:59

转发自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    }});1
2
3
4
5
6
7
1
2
3
4
5
6
7

(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>1
2
3
4
5
6
7
1
2
3
4
5
6
7

当分别点击的时候就会回调到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);    }               });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用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");1
2
3
4
5
6
1
2
3
4
5
6

在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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击以后就会弹出Toast。

使用js sdk的优势以及劣势
优势

1.对Javascript代码单独的书写，方便项目的开发和维护。
2.方便应用的更新，WebView的更新只需要后台的更新就行不需要移动端还做处理。

劣势

使用addJavascriptInterface()在Android 17一下会有一个漏洞，使用起来不安全。在上面的代码中会发现hello(String name)上面加了一个@JavascriptInterface，这个是在Android 17以后处理这个漏洞的方法。在Android 17以后，想要安全的处理这个漏洞，肯定是不能再使用addJavascriptInterface()这个方法，现在可以使用的是前面的showOverrideUrlLoading()，或者是通过onJsPrompt(),onJsAlert()和onJsConfirm()这些方法。上面都有介绍。

0 0