1.首先準(zhǔn)備一個(gè)test.html文檔，如下：
<html>
<meta charset="utf-8"><head>
<title>js交互android</title>
<script type="text/javascript">
function show(){ var a = document.getElementById("text").value;
alert("警告，你輸入的是："+a); }
function rfInfo(jsonStr) {
document.getElementById("info").innerHTML="從Android客戶端傳來的作者信息:"+jsonStr.Developer;
}
function cfm() {
if(confirm("確認(rèn)界面提示?"))
{ return true;
}
else {
return false;
}
}
function pmt() {
var place = prompt("請輸入位置?",""); }
</script>
</head>
<body>
<form action="">
<p>
<div id="info">從Android客戶端傳來的作者信息:</div>
</p>
<p>
<input type="text" id="text" value="input your msg"/>
</p>
<p>
<div id="inputinfo">輸入的信息:</div>
</p>
<p><input type="button" id="btn_alert" onclick="show()"
value="Alert"/>
</p>
<p>
<input type="button" id="btn_cfm" onclick="cfm()"
value="Confirm"/></p>
<p>
<input type="button" id="btn_pmt" onclick="pmt()" value="Prompt"/>
</p>
<p>
<input type="button" id="btn_android" onclick="window.demo.adrdMethod()"
value="調(diào)用android方法"/>
</p>
</form>
</body>
</html>
注意看網(wǎng)頁中《調(diào)用android方法》的button的點(diǎn)擊事件，onclick中的內(nèi)容就相當(dāng)于指向android中adrdMethod()方法的id.
2.Android的布局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.alden.l_alden.jsandandroid.MainActivity">
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="調(diào)用js方法"/>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3.在WebView中加載test.html頁面，并且與Android交互
界面.png
//
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends AppCompatActivity {
private WebView webView;
private Button button;
final String jsonStr = "{\"Developer\":\"Alden\",\"Place\":\"Nanjing\"}";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webview);
button = (Button) findViewById(R.id.btn);
webView.setWebChromeClient(new WebChromeClient()
{
/*此處覆蓋的是javascript中的alert方法。
*當(dāng)網(wǎng)頁需要彈出alert窗口時(shí)，會執(zhí)行onJsAlert中的方法
* 網(wǎng)頁自身的alert方法不會被調(diào)用。
*/
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
Log.d("info", "彈出了提示框");
result.confirm();
return true; }
/*此處覆蓋的是javascript中的confirm方法。
*當(dāng)網(wǎng)頁需要彈出confirm窗口時(shí)，會執(zhí)行onJsConfirm中的方法
* 網(wǎng)頁自身的confirm方法不會被調(diào)用。 */
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
Log.d("info", "彈出了確認(rèn)框");
result.confirm();
return true; }
//在方法中寫自己想要取代彈出js輸入框的實(shí)現(xiàn)代碼，比如一個(gè)Dialog
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
Log.d("info", "彈出了輸入框");
result.confirm();
return true; }
/*
* 如果頁面被強(qiáng)制關(guān)閉,彈窗提示：是否確定離開？
* 點(diǎn)擊確定 保存數(shù)據(jù)離開，點(diǎn)擊取消，停留在當(dāng)前頁面 */
@Override
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
Log.d("info", "彈出了離開確認(rèn)框");
result.confirm();
return true; }
});
webView.setWebViewClient(new WebViewClient() {
/*點(diǎn)擊頁面的某條鏈接進(jìn)行跳轉(zhuǎn)的話，會啟動(dòng)系統(tǒng)的默認(rèn)瀏覽器進(jìn)行加載，調(diào)出了我們本身的應(yīng)用
* 因此，要在shouldOverrideUrlLoading方法中
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { //使用當(dāng)前的WebView加載頁面 view.loadUrl(url); return true; }
/*
* 網(wǎng)頁加載完畢(僅指主頁，不包括圖片)
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 網(wǎng)頁加載完畢(僅指主頁，不包括圖片)
*/
@Override
public void onPageFinished(WebView view, String url)
{
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
/*
* 加載頁面資源
*/
@Override
public void onLoadResource(WebView view, String url) {
// TODO Auto-generated method stub
super.onLoadResource(view, url);
}
/*
* 錯(cuò)誤提示
*/
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
// TODO Auto-generated method stub
super.onReceivedError(view, errorCode, description, failingUrl);
} });
//支持js代碼（必須要的）
webView.getSettings().setJavaScriptEnabled(true);
//設(shè)置是否支持縮放
webView.getSettings().setSupportZoom(false);
//js調(diào)用android的方法接口，第二個(gè)參數(shù)就相當(dāng)于js對象找android中這個(gè)方法的鑰匙，
webView.addJavascriptInterface(new Object(){
//此方法內(nèi)容須創(chuàng)建子線程操作，不然會出現(xiàn)下面這個(gè)錯(cuò)誤
//Uncaught Error: Error calling method on NPObject
@JavascriptInterface
public void adrdMethod() {
new Thread(new Runnable() {
@Override
public void run() {
Log.d("info", "js調(diào)用了Android方法");
}
}).start();
}
},"demo");
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("info", "Android調(diào)用了js方法");
/*
* 通過webView.loadUrl("javascript:xxx")方式就可以調(diào)用當(dāng)前網(wǎng)頁中的名稱為xxx的javascript方法
*/
webView.loadUrl("javascript:rfInfo("+jsonStr+")"); }
});
webView.loadUrl("file:///android_asset/test.html"); }}
總結(jié)：
1.Android調(diào)用js中的方法：
通過webView.loadUrl("javascript:xxx")方式就可以調(diào)用當(dāng)前網(wǎng)頁中的名稱為xxx的javascript方法
2.js調(diào)用Android中的方法：
webView.addJavascriptInterface（Object object,String str）：第一個(gè)參數(shù)是一個(gè)類對象，第二個(gè)參數(shù)是js中調(diào)用此類中的方法的標(biāo)識
3.js調(diào)用的android的方法中的操作需要在子線程中，不然報(bào)錯(cuò)
Uncaught Error: Error calling method on NPObject ；
4.首先你要支持js代碼（必須要的）
webView.getSettings().setJavaScriptEnabled(true);
