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>
- /**
- * 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>