快捷導(dǎo)航

Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法【相互調(diào)用參數(shù)、傳值】

更新時(shí)間：2017年03月07日 10:31:04 作者：books1958

這篇文章主要介紹了Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法,可實(shí)現(xiàn)基于WebView與JavaScript相互調(diào)用參數(shù)、傳值的功能,需要的朋友可以參考下

本文實(shí)例講述了Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法。分享給大家供大家參考，具體如下：

Android中可以使用WebView加載網(wǎng)頁，同時(shí)Android端的Java代碼可以與網(wǎng)頁上的JavaScript代碼之間相互調(diào)用。

效果圖：

（一）Android部分：

布局代碼：

<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:focusable="true"
  android:focusableInTouchMode="true"
  android:orientation="vertical"
  android:padding="8dp"
  tools:context=".MainActivity">
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
      android:id="@+id/input_et"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:singleLine="true"
      android:layout_weight="1"
      android:hint="請輸入信息" />
    <Button
      android:text="Java調(diào)用JS"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="sendInfoToJs" />
  </LinearLayout>
  <WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

Activity代碼：

/**
 * Android WebView 與 Javascript 交互。
 */
public class MainActivity extends ActionBarActivity {
  private WebView webView;
  @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = (WebView) findViewById(R.id.webView);
    webView.setVerticalScrollbarOverlay(true);
    //設(shè)置WebView支持JavaScript
    webView.getSettings().setJavaScriptEnabled(true);
    String url = "http://192.168.1.27/js_17_android_webview.html";
    webView.loadUrl(url);
    //在js中調(diào)用本地java方法
    webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
    //添加客戶端支持
    webView.setWebChromeClient(new WebChromeClient());
  }
  private class JsInterface {
    private Context mContext;
    public JsInterface(Context context) {
      this.mContext = context;
    }
    //在js中調(diào)用window.AndroidWebView.showInfoFromJs(name)，便會觸發(fā)此方法。
    @JavascriptInterface
    public void showInfoFromJs(String name) {
      Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
    }
  }
  //在java中調(diào)用js代碼
  public void sendInfoToJs(View view) {
    String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
    //調(diào)用js中的函數(shù)：showInfoFromJava(msg)
    webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
  }
}

（二）網(wǎng)頁代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Android WebView 與 Javascript 交互</title>
<head>
 <style>
 body {background-color:#e6e6e6}
 .rect
 {
  color:white;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:16px;
  width:100px;
  padding:6px;
  background-color:#98bf21;
  text-decoration:none;
  text-align:center;
  border:none;
  cursor:pointer;
 }
 .inputStyle {font-size:16px;padding:6px}
 </style>
</head>
<body>
 <p>測試Android WebView 與 Javascript 交互</p>
 <input id = "name_input" class = "inputStyle" type="text"/>
 <a class = "rect" onclick="sendInfoToJava()">JS調(diào)用Java</a>
 <script>
 function sendInfoToJava(){
  //調(diào)用android程序中的方法，并傳遞參數(shù)
  var name = document.getElementById("name_input").value;
  window.AndroidWebView.showInfoFromJs(name);
 }
 //在android代碼中調(diào)用此方法
 function showInfoFromJava(msg){
  alert("來自客戶端的信息："+msg);
 }
 </script>
</body>
</html>

更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android視圖View技巧總結(jié)》、《Android開發(fā)動畫技巧匯總》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android布局layout技巧總結(jié)》、《Android開發(fā)入門與進(jìn)階教程》、《Android資源操作技巧匯總》及《Android控件用法總結(jié)》

希望本文所述對大家Android程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: