Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
程序员文章站
2023-12-01 13:19:22
本文实例讲述了android编程使用webview实现与javascript交互的方法。分享给大家供大家参考，具体如下：
android中可以使用webview加载网页，...
本文实例讲述了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程序设计有所帮助。