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

叁歲伎倆 2022-08-13 12:46 206阅读 0赞

在 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 事件为:

特 别 提 示 下 , 在 自定义的 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的相互调用了，大体先介绍到这吧。