Webview是Android平臺(tái)中一個(gè)重要組件,，通常是通過在Activity中嵌套一個(gè)簡(jiǎn)單瀏覽器，實(shí)現(xiàn)在線網(wǎng)頁瀏覽的功能或者實(shí)現(xiàn)Android與JavaScript的通信,，此時(shí)addJavascriptInterface方法就顯得尤為重要,。但熟悉的人應(yīng)該會(huì)有所發(fā)現(xiàn)，在API 17以后,，addJavascriptInterface方法就失效了,，下面將詳細(xì)的介紹addJavascriptInterface方法以及失效解決方法。
一,、 addJavascriptInterface簡(jiǎn)介
addJavascriptInterface是WebKit的原生API，屬于WebView對(duì)象的公共方法,，用于暴露一個(gè)java對(duì)象給js,，使得js可以直接調(diào)用方法。當(dāng)然,，java與js的相互調(diào)用也離不開loadUrl()方法的配合使用,。但是addJavascriptInterface的使用也是有些問題,，因?yàn)锳ndroid平臺(tái)封裝WebKit內(nèi)核時(shí)，不同的版本中會(huì)有些不一致,。
二,、網(wǎng)頁內(nèi)容
1. HTML代碼
<html>
<head>
<meta charset="gb-2312">
<title>無標(biāo)題文檔</title>
<link href="http://code./mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
<script src="http://code./jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code./mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>標(biāo)題</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">
注冊(cè)
</li>
<li>
<div data-role="fieldcontain">
<label for="username">用戶名:</label>
<input type="text" name="textinput" id="username" value="張三" />
</div></li><li>
<div data-role="fieldcontain">
<label for="password">密碼:</label>
<input type="password" name="textinput" id="password" value="zhangsan" />
</div></li><li>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>性別:</legend>
<input type="radio" name="radio1" id="man" value="0" />
<label for="man">男</label>
<input type="radio" name="radio1" id="woman" value="1" />
<label for="woman">女</label>
</fieldset>
</div></li><li>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>愛好</legend>
<input type="checkbox" name="checkbox1" id="football" class="custom" value="0" />
<label for="football">足球</label>
<input type="checkbox" name="checkbox1" id="basketball" class="custom" value="1" />
<label for="basketball">籃球</label>
<input type="checkbox" name="checkbox1" id="vollyball" class="custom" value="2" />
<label for="vollyball">排球</label>
</fieldset>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">國籍:</label>
<select name="selectmenu" id="selectmenu">
<option value="China">中國</option>
<option value="America">美國</option>
<option value="Japan">日本</option>
</select>
</div>
</li>
<li>
<button id="commit">提交</button>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>腳注</h4>
</div>
</div>
</body>
</html>
2.JS代碼
<script>
$(function(){
$("#commit").click(function(){
var result = "{";
result +="\"username\":\"";
result +=$("#username").val();
result +="\",\"password\":\"";
result +=$("#password").val();
result += "\",\"gender\":\"";
result += $('input[name="radio1"]:checked').val();
result += "\",\"interest\":\"";
$('input[name="checkbox1"]:checked').each(function() {
result += $(this).val()+",";
});
result += "\",\"country\":\"";
result += $("#selectmenu option:selected").text()+"\"}";
register_js.register(result);
});
});
</script>
3.實(shí)現(xiàn)效果圖
三、API 17以前addJavascriptInterface的使用方法
1.獲取網(wǎng)頁
wv = (WebView) this.findViewById(R.id.wv1);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
wv.addJavascriptInterface(new JSInterface(), "register_js")
register_js為交互時(shí)相互定義的名字,。
2.JS中調(diào)用方法在Android中響應(yīng)
public void register(String userInfo){
Toast.makeText(MainActivity.this, userInfo, Toast.LENGTH_LONG).show();
}
register方法為js中調(diào)用的方法名,，與addJavascriptInterface相對(duì)應(yīng)。具體可參照J(rèn)avaScript的代碼,。
四,、API 17以后addJavascriptInterface的使用方法
1. 獲取網(wǎng)頁
wv = (WebView) this.findViewById(R.id.wv1);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
wv.addJavascriptInterface(new JSInterface(), "register_js")
2.JS中調(diào)用方法在Android中響應(yīng)
public void register(String userInfo){
Toast.makeText(MainActivity.this, userInfo, Toast.LENGTH_LONG).show();
}
3.注意
需要添加注解，否則addJavascriptInterface方法會(huì)失效,。
@SuppressLint("JavascriptInterface")
@JavascriptInterface
4.方法更換原因
Android4.2以前WebView 提供了javascript 調(diào)用Java代碼的方法,，會(huì)造成很大的安全漏洞。Android官方在API 17后,，限制javascript代碼只能調(diào)用聲明了@JavascriptInterface 注解的Java方法,。
所以必須要給每個(gè)可供js代碼調(diào)用的Java方法加一個(gè)@JavascriptInterface接口。
五,、MainActivity.java代碼
package com.example.administrator.addjavascriptinterfacefunctiontest;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView wv;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv = (WebView) this.findViewById(R.id.wv1);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
wv.addJavascriptInterface(new JSInterface(), "register_js");
}
private final class JSInterface{
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public void register(String userInfo){
Toast.makeText(MainActivity.this, userInfo, Toast.LENGTH_LONG).show();
}
}
}
六,、源碼下載
地址：http://download.csdn.net/download/u012721519/10225784
Good luck！
Write by Jimmy.li
