(五) Android中WebView跟JavaScript中的交互

浏览数：22 / 时间：2015年06月11日

在 android 的应用程序中,可以直接调用 WebView 中的 javascript 代码,而 WebView 中的 javascript 代码,也可以去调用 ANDROID 应用程序(也就是 JAVA 部分的代码).下面举例说明之:

1、JAVASCRIPT 脚本调用 android 程序
要在 WebView 中,调用 addJavascriptInterface(OBJ,interfacename)其中,obj 为和 javascript 通信的应用程序,interfacename 为提供给 JAVASCRIPT 调用的名称,设置如下:

<span style="font-size:14px;">WebView WebView = new WebView(this);
WebView.getSettings().setJavaScriptEnabled(true);
WebView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
//设定 JavaScript 脚本代码的界面名称是”android”
WebView.addJavascriptInterface(this, "android");</span>

其中 WebView 调用的 HTML 页中,JS 如下:

<span style="font-size:14px;"><script type="text/javascript">
function ok() {
android.js(document.forms[0].elements[0].value, document.forms[0].elements[1].value);
}
</script></span>

而这个 android.js 在哪呢?那是在应用程序中的

<span style="font-size:14px;">//JavaScript 脚本代码可以调用的函数 js()处理
public void js(String action, String uri) {
...../
}</span>

这个 JS 中就是处理 JAVASCRIPT 发送过来的请求了.

2、下面的例子,当 WebView 网页中输入后,点提交按钮,会跟 ANDROID 的应用程序进行交互

<span style="font-size:14px;">WebView WebView = new WebView(this);
WebView.getSettings().setJavaScriptEnabled(true);
WebView.setWebChromeClient(new MyWebChromeClient());
WebView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
//onJsAlert()函数接收到来自 HTML 网页的 alert()警告信息
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
if (message.length() != 0) {
AlertDialog.Builder builder = new AlertDialog.Builder(JExample02.this);
builder.setTitle("From JavaScript").setMessage(message).show();
result.cancel();
return true;
}
return false;
}</span>

而 HTML 页中的 JS 事件为:

<span style="font-size:14px;"><input type="button" value="alert" onclick="alert(document.forms[0].elements[0].value)"></span>

特别提示下 , 在自定义的 MyWebChromeClient()) 中 , 除了可以重写 onJSAlert 外 , 还可以重写onJsPrompt,onJsConfirm 等。
3、下面这个例子,先显示第一张图片,点一点后,再显示第 2 张图片
HTML JS 中:

<span style="font-size:14px;"><script language="javascript">
function changeImage02() {
document.getElementById("image").src="navy02.jpg";
}
function changeImage01() {
document.getElementById("image").src="navy01.jpg";
}
</script>
</head>
<body>
<a onClick="window.demo.onClick()">
<img id="image" src="navy01.jpg"/></a>
</body></span>

当点<a onClick="window.demo.onClick()">后,调用 ANDROID 应用程序中的处理部分,看程序

<span style="font-size:14px;">WebView.addJavascriptInterface(new JSInterface(),"demo");
public final class JSInterface {
//JavaScript 脚本代码可以调用的函数 onClick()处理
public void onClick() {
handler.post(new Runnable() {
public void run() {
if (flag == 0) {
flag = 1;
WebView.loadUrl("javascript:changeImage02()");
} else {
flag = 0;
WebView.loadUrl("javascript:changeImage01()");
}
}
});
}
}</span>

可以看到,ANDROID 中,通过 WebView.loadUrl 去调用 HTML 页面中的 JS.

其实在第一篇文章中，就已经接触到了webView和js的相互调用了，大体先介绍到这吧。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

(五) Android中WebView跟JavaScript中的交互