Android WebView和html中js互調，androidwebview
希望大寫一起學習android,一起進步。可以加群 102063643 android技術開發
在做應用的過程中，越來越多的應用使用webView來顯示介面了，其中很多和js互動的地方。
寫了一個Demo,大家來看一下和項目結構
index.html的代碼如下
<html><head> <title>JS互動</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function invokedByJava(param) { document.getElementById("content").innerHTML = "Java has invoked JS function and returnd the data:"+param; } </script></head><body> <p id="content"></p> <p> <input type="button" style="width:160px;height:40px" value="調用Java方法" onclick="window.stub.jsMethod('來至JS的參數');" /> <input type="button" style="width:160px;height:40px" value="調用alert" onclick="alert('hello')" /> </p></body></html>
這個是MainActivity的代碼
public class MainActivity extends Activity { private WebView mWebView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.changButton).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { //調用JS方法，並傳遞參數 mWebView.loadUrl("javascript:invokedByJava('Hello World')"); } }); mWebView = (WebView)findViewById(R.id.webView); mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); mWebView.getSettings().setBuiltInZoomControls(true); mWebView.getSettings().setJavaScriptEnabled(true); /* WebView預設用系統內建瀏覽器處理頁面跳轉。 為了讓頁面跳轉在當前WebView中進行，重寫WebViewClient。 但是按BACK鍵時，不會返回跳轉前的頁面，而是退出本Activity。重寫onKeyDown()方法來解決此問題。 */ mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url);//使用當前WebView處理跳轉 return true;//true表示此事件在此處被處理，不需要再廣播 } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { //有頁面跳轉時被回調 } @Override public void onPageFinished(WebView view, String url) { //頁面跳轉結束後被回調 } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Toast.makeText(MainActivity.this, "Oh no! " + description, Toast.LENGTH_SHORT).show(); } }); /* 當WebView內容影響UI時調用WebChromeClient的方法 */ mWebView.setWebChromeClient(new WebChromeClient() { /** * 處理JavaScript Alert事件 */ @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { //用Android組件替換 new AlertDialog.Builder(MainActivity.this) .setTitle("JS提示") .setMessage(message) .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() { public void onClick(DialogInterface dialog, int which) { result.confirm(); } }) .setCancelable(false) .create().show(); return true; } }); /* 綁定Java對象到WebView，這樣可以讓JS與Java通訊(JS訪問Java方法) 第一個參數是自訂類對象，映射成JS對象 第二個參數是第一個參數的JS別名 調用樣本： mWebView.loadUrl("javascript:window.stub.jsMethod('param')"); */ mWebView.addJavascriptInterface(new JsToJava(), "stub"); final EditText mEditText = (EditText)findViewById(R.id.urlEditText); findViewById(R.id.web_view_search).setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { String url = mEditText.getText().toString(); if (url == null || "".equals(url)) { Toast.makeText(MainActivity.this, "請輸入URL", Toast.LENGTH_SHORT).show(); } else { if (!url.startsWith("http:") && !url.startsWith("file:")) { url = "http://" + url; } mWebView.loadUrl(url); } } }); //預設頁面 mWebView.loadUrl("file:///android_asset/index.html"); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //處理WebView跳轉返回 if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); } private class JsToJava { @JavascriptInterface public void jsMethod(String paramFromJS) { Log.i("CDH", paramFromJS); } }}
點擊調用JS改變頁面內容
點擊“調用alert”按鈕，在Android中捕獲JS alert，並用Android組件（AlertDialog）替換
點擊“調用java方法”按鈕，在JS中調用並傳遞參數到Java中的方法
最後點擊輸入網址開啟網頁
點擊下載源碼
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
