玉林市乾亨网络科技有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

产品目录

联系方式

联系人:业务部
电话: 00134-855122
邮箱:service@nnbongruidatong.com

当前位置:首页 >> 新闻中心 >> 正文

Android:WebView与Javascript交互(相互调用参数、传值)

字号:
摘要:Android:WebView与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>