Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
更新时间：2017年03月07日 10:31:04 作者：books1958
这篇文章主要介绍了Android编程使用WebView实现与Javascript交互的方法,可实现基于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>
更多关于Android相关内容感兴趣的读者可查看本站专题：《Android视图View技巧总结》、《Android开发动画技巧汇总》、《Android编程之activity操作技巧总结》、《Android布局layout技巧总结》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》
希望本文所述对大家Android程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了Android使用Websocket实现聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要介绍了Android编程实现滑动开关组件功能,结合实例形式详细分析了Android滑动开关组件的简单布局与功能实现技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下2018-01-01
Android编程基于自定义view实现公章效果示例【附源码下载】
这篇文章主要介绍了Android编程基于自定义view实现公章效果,结合实例形式分析了Android使用自定义view进行图形绘制的相关操作技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下2017-11-11
Android Studio配置国内镜像源（利用hosts）
这篇文章主要介绍了Android Studio配置国内镜像源(利用hosts)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Android编程实现根据经纬度查询地址并对获取的json数据进行解析的方法
这篇文章主要介绍了Android编程实现根据经纬度查询地址并对获取的json数据进行解析的方法,结合实例形式分析了Android的经纬度地址解析与json格式数据操作相关技巧,需要的朋友可以参考下2017-02-02
Android自定义StickinessView粘性滑动效果
这篇文章主要为大家详细介绍了Android自定义StickinessView粘性滑动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
JNI是Java Native Interface的缩写,它提供若干的API实现Java与其他语言之间的通信,这篇文章主要给大家介绍了关于Android中JNI的使用方法,需要的朋友可以参考下2021-08-08
Kotlin startActivity跳转Activity实现流程详解
在Android当中，Activity的跳转有两种方法，第一个是利用startActivity（Intent intent）；的方法，第二个则是利用startActivityForResult(Intent intent,int requestCode);的方法，从字面上来看，这两者之间的差别只在于是否有返回值的区别，实际上也确实只有这两种区别2022-12-12
这篇文章主要为大家详细介绍了Android使用okHttp(get方式)进行登录，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了Flutter自定义圆盘取色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论