首页 > 代码库 > (五) Android中WebView跟JavaScript中的交互

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

2024-07-29 11:31:40   224人阅读

在 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=http://www.mamicode.com/"alert" onclick="alert(document.forms[0].elements[0].value)">
特 别 提 示 下 , 在 自定义的 MyWebChromeClient()) 中 , 除 了 可 以 重 写 onJSAlert 外 , 还 可 以 重 写onJsPrompt,onJsConfirm 等。
3、下面这个例子,先显示第一张图片,点一点后,再显示第 2 张图片
HTML JS 中:

<span style="font-size:14px;"><script language="javascript">
function changeImage02() {
document.getElementById("image").src=http://www.mamicode.com/"navy02.jpg";>
当点<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中的交互


联系
我们