標籤：文章 UI 輸入 blank style find 部分 head webview控制項
首先引用一篇文章，看過這篇文章基本上就明白android大致與js是如何互動的了
Android與HTML+JS互動入門
----------------------------分割線-----------------------------------
首先要知道js是啥，js就相當於在html內的函數方法，全稱為javascript
那麼要互動，必然二者要共存於一起，在android中如何開啟一個頁面，比較常用的方法就是使用一個WebView控制項，用它來載入網頁
互動也必然是雙方的，有來有往，下面分兩部分說明
PS：這裡直接援引前面文章中的例子，稍作修改
1，android中調用js
那麼首先得有js，不然怎麼調用，所以html如下
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><script type="text/javascript">function javacalljs(){ document.getElementById("content").innerHTML = "<br\>JAVA調用了JS的無參函數";}function javacalljswith(arg){ document.getElementById("content").innerHTML = ("<br\>"+arg);}</script></head><body>HTML 內容顯示 <br/><h1><div id="content">內容顯示</div></h1></body></html>
這裡需注意的是，兩個方法的名稱需要與之後調用的名稱相同：javacalljs，javacalljswith
那麼將它放入工程內，或是部署在伺服器上，隨後在webView中載入這個url
這裡唯寫出webView載入該url的代碼
contentWebView = (WebView) findViewById(R.id.webview); // 啟用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 從assets目錄下面的載入html contentWebView.loadUrl("file:///android_asset/web.html");
這裡因為作者使用的是放入工程的方法，故而loadUrl方法內傳遞的是一個本地的相對位址
到這裡webView載入網頁就完成了，那麼如何使用webView調用其中的js呢
contentWebView.loadUrl("javascript:javacalljs()");
亦或者是
contentWebView.loadUrl("javascript:javacalljswith(" + "‘http://blog.csdn.net/Leejizhou‘" + ")");
兩者都是之前在html內定義過的js函數名，一個有參一個無參（這裡為尊重援引博文的作者，參數內的部落格地址就不修改了）
到這為之，android中調用js就完成了
那麼互動互動，反過來，如何在html代碼內與android互動呢
修改一下html的代碼
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head><body>HTML 內容顯示 <br/><h1><div id="content">內容顯示</div></h1><br/><input type="button" value="點擊調用java代碼" onclick="window.android.startFunction()" /><br/><input type="button" value="點擊調用java代碼並傳遞參數" onclick="window.android.startFunction(‘http://blog.csdn.net/Leejizhou‘)" /></body></html>
這裡可以看到，正如學習android時，在xml頁面內寫onclick來綁定點擊方法一樣，html用的也是這種方法，只是不同的是這裡面需要輸入的不止是一個方法名，而是window.變數名.方法名
方法名自不用說，至於什麼是變數名，先看下面的代碼
首先webView的初始化要改成如下代碼
contentWebView = (WebView) findViewById(R.id.webview); // 啟用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 從assets目錄下面的載入html contentWebView.loadUrl("file:///android_asset/web.html"); contentWebView.addJavascriptInterface(MainActivity.this,"android");
最後一行添加js介面的時候，後面的“android”就是之前說的變數名
那麼再往下，就需要定義這個方法了
//由於安全原因 targetSdkVersion>=17需要加 @JavascriptInterface //JS調用Android JAVA方法名和HTML中的按鈕 onclick後的別名後面的名字對應 @JavascriptInterface public void startFunction(){ runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this,"show",3000).show(); } }); } @JavascriptInterface public void startFunction(final String text){ runOnUiThread(new Runnable() { @Override public void run() { new AlertDialog.Builder(MainActivity.this).setMessage(text).show(); } }); }
做到這，js就可以調用本地android中的方法了，這就實現了互動的過程
當然這裡的互動非常簡單，如果需求不一樣，還需要修改，例如調用js時使用evaluateJavascript（）會使得網頁不重新整理並且較為容易獲得傳回值等等
這方面在這篇文章中講的很透徹，這裡也直接引用
Android：你要的WebView與 JS 互動方式 都在這裡了
android與js互動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
