您的位置：首页 > 移动开发 > Android开发

Android：WebView与Javascript交互（相互调用参数、传值）

2016-09-12 11:37 579 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航