Native通过Javascript与Html5交互

本文分为四个部分，分别为：

WebView的使用
html5 加载Javascript 的过程
Native 与html5 的交互方法
使用js sdk 的优势以及劣势

所有的内容都是新手性质的，特别是前面两个内容是因为自己没有使用过WebView以及不太了解html5 加载Javascript 的原因，所以大家会的可以自己跳过看后面。写博客为的是记录自己工作学习过程中的一些问题，所以可能有很多只是自己的想法，可能有很多的错误，希望大家发现能指出来。

`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的优势以及劣势

优势

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

劣势

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

WebView的使用

1.WebChromeClient：辅助WebView处理Javascript 的对话框，加载进度条，网站图标，网站title 等等。

2.WebViewClient：帮助WebView处理各种通知、请求事件等等。

3.WebSettings：用来设置WebView的一些属性。