標籤：webview android javascript
Android中可以使用WebView載入網頁，同時Android端的java代碼可以與網頁上的javascript代碼之間相互調用。
：
（一）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調用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); //設定WebView支援JavaScript webView.getSettings().setJavaScriptEnabled(true); String url = "http://192.168.1.27/js_17_android_webview.html"; webView.loadUrl(url); //在js中調用本地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中調用window.AndroidWebView.showInfoFromJs(name)，便會觸發此方法。 @JavascriptInterface public void showInfoFromJs(String name) { Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show(); } } //在java中調用js代碼 public void sendInfoToJs(View view) { String msg = ((EditText) findViewById(R.id.input_et)).getText().toString(); //調用js中的函數：showInfoFromJava(msg) webView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); }}（二）網頁代碼：
<!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調用Java</a> <script> function sendInfoToJava(){ //調用android程式中的方法，並傳遞參數 var name = document.getElementById("name_input").value; window.AndroidWebView.showInfoFromJs(name); } //在android代碼中調用此方法 function showInfoFromJava(msg){ alert("來自用戶端的資訊："+msg); } </script></body></html>
Android：WebView與Javascript互動（相互調用參數、傳值）
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
