WebView之javascript与android交互基础加强

时间：2023-03-09 18:36:36
WebView之javascript与android交互基础加强

一、什么是js与android交互？

　　通俗一点就是使用js代码调用java代码，或者使用java代码调用js代码。

二、为什么要使用js与java代码交互？

　　1.可以做一些js网页做本身处理不了的事情。例如：在网页上调用Android本地打电话，发短信功能、在网页上调用Android手机通讯录、在网页上调用第三方应用、在网页上调用一些Android的本地化处理（操作IO，数据库）等。

　　2.可以实现js开发人员与android开发人员合作开发。例如：js开发人员开发js代码供android开发人员调用，android开发人员就不必写js代码，可以专注于andrid开发，用到js的时候直接调用js代码就可以了。（反之亦然）

　　3.可以实现网页的动态更新。例如：可以利用js代码调用java的更新数据显示到网页上以达到动态更新网页的目的。

三、js代码调用java代码操作步骤

　　1.开启使用js功能

webSettings.setJavaScriptEnabled(true);

　　2.设置编码默认编码格式（编码格式要和html编码格式对应）

webSettings.setDefaultTextEncodingName("gbk");

　　3.注入提供的java对象到webView：主要是这段代码，解释一下，第一个参数定义了一个对象，该对象中可以写任意的方法，供js代码调用。第二个参数是该自定义对象的一个别名。js调用该对象的方法时会使用到该别名。调用格式为：对象名.方法名。例如：jsobject.androidAlert();调用android的alert对话框。

webView.addJavascriptInterface(new JsObject(), "jsobject");

　　4.设置WebChromeClient对象，并实现其中的onJsAlert、onJsConfirm等方法。注意这里必须要实现这几个方法，不然js调用java代码弹框时可能没有反应。

　　　　　　　@Override

            public boolean onJsAlert(WebView view, String url, String message,

                    JsResult result) {

                // TODO Auto-generated method stub

                return super.onJsAlert(view, url, message, result);

            }

            @Override

            public boolean onJsConfirm(WebView view, String url,

                    String message, JsResult result) {

                // TODO Auto-generated method stub

                return super.onJsConfirm(view, url, message, result);

            }

            @Override

            public boolean onJsPrompt(WebView view, String url, String message,

                    String defaultValue, JsPromptResult result) {

                // TODO Auto-generated method stub

                return super.onJsPrompt(view, url, message, defaultValue,

                        result);

            }

四、android代码调用js代码

　　这个相对比较简单，只需要一行代码就能搞定：

　　例如：

//android调用js代码

webView.loadUrl("javascript:test_alert()");

做完以上几步后就可以实现真正调用了。下面给出完整代码

一、HTML代码jshtml.html（改代码放在assets文件夹下）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>这是一个HTML</title>  

    <script type="text/javascript">

         /*js调用android的方法*/

          function jsCallAndroidAlert(){

              jsobject.androidAlert();

          }

        function test_alert() {

        /* 弹出对话框 */

            alert("啊哈！连Android系统都调用JS函数了");

        }  

    </script>

</head>

    <body>

        <button onclick="jsCallAndroidAlert()">test</button>

        <button onclick="test_alert()">test_alert</button>

    </body>

</html>

二、MainActivity.java

package com.yw.webkitdemo;

import android.os.Bundle;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.content.DialogInterface.OnClickListener;

import android.graphics.Bitmap;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup.LayoutParams;

import android.webkit.JsPromptResult;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.Button;

import android.widget.ProgressBar;

import android.widget.Toast;

@SuppressLint("JavascriptInterface")

public class MainActivity extends Activity implements android.view.View.OnClickListener{

    private WebView webView;

    private ProgressBar progressBar;

    private Button btn_js;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main_layout);

        btn_js = (Button)findViewById(R.id.btn_js);

        btn_js.setOnClickListener(this);

        progressBar = new ProgressBar(this, null,

                android.R.attr.progressBarStyleHorizontal);

        progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,

                5));

        webView = (WebView) findViewById(R.id.webView);

        WebSettings webSettings = webView.getSettings();

        // 启用javascrip功能

        webSettings.setJavaScriptEnabled(true);

        //设置可以使用中文，否则会出现中文乱码

        webSettings.setDefaultTextEncodingName("gbk");

        webView.addView(progressBar);

        webView.setWebChromeClient(new WebChromeClient() {

            @Override

            public void onProgressChanged(WebView view, int newProgress) {

                if (newProgress == 100) {

                    progressBar.setVisibility(View.GONE);

                } else {

                    if (progressBar.getVisibility() == View.GONE)

                        progressBar.setVisibility(View.VISIBLE);

                    progressBar.setProgress(newProgress);

                }

                super.onProgressChanged(view, newProgress);

            }

            @Override

            public boolean onJsAlert(WebView view, String url, String message,

                    JsResult result) {

                // TODO Auto-generated method stub

                return super.onJsAlert(view, url, message, result);

            }

            @Override

            public boolean onJsConfirm(WebView view, String url,

                    String message, JsResult result) {

                // TODO Auto-generated method stub

                return super.onJsConfirm(view, url, message, result);

            }

            @Override

            public boolean onJsPrompt(WebView view, String url, String message,

                    String defaultValue, JsPromptResult result) {

                // TODO Auto-generated method stub

                return super.onJsPrompt(view, url, message, defaultValue,

                        result);

            }

        });

        /*

         * 此段代码在不做处理的情况下会弹出多个浏览器选择界面 webView.loadUrl("http://www.baidu.com/");

         */

        webView.setWebViewClient(new WebViewClient() {

            @Override

            public void onPageStarted(WebView view, String url, Bitmap favicon) {

                super.onPageStarted(view, url, favicon);

            }

            @Override

            public void onPageFinished(WebView view, String url) {

                super.onPageFinished(view, url);

            }

        });

//         webView.loadUrl("http://www.baidu.com/");

        /**

         * 自定义对象，以及对象别名

         * 自定义对象中定义的方法可以供js调用

         * function jsCallAndroidAlert(){

              jsobject.androidAlert();

              }

         */

        webView.addJavascriptInterface(new JsObject(), "jsobject");

        //加载我们自定义的html网页并将其显示在webView上

        webView.loadUrl("file:///android_asset/jshtml.html");

    }

    /**

     * 此类的方法对应html中js的方法，供js调用Android的方法

     *

     * @author Administrator

     *

     */

    class JsObject {

        public void androidAlert() {

            AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);

            dialog.setTitle("温馨提示");

            dialog.setMessage("js调用了Android的Alert，测试完毕是否退出？");

            dialog.setNegativeButton("否", new OnClickListener() {

                @Override

                public void onClick(DialogInterface arg0, int arg1) {

                }

            });

            dialog.setPositiveButton("是", new OnClickListener() {

                @Override

                public void onClick(DialogInterface dialog, int which) {

                    dialog.dismiss();

                }

            });

            AlertDialog dialog2 = dialog.create();

            dialog2.show();

            Toast.makeText(MainActivity.this, "您使用js调用了alert方法",

                    Toast.LENGTH_LONG).show();

        }

        public void androidConfirm() {

            Toast.makeText(MainActivity.this, "您使用js调用了confirm方法",

                    Toast.LENGTH_LONG).show();

        }

    }

    /**

     * 对系统的back键进行设置

     */

    @Override

    public void onBackPressed() {

        if (webView != null && webView.canGoBack()) {

            webView.goBack();

        } else {

            super.onBackPressed();

        }

    }

    @Override

    public void onClick(View v) {

        switch(v.getId()){

        case R.id.btn_js:

            //android调用js代码

            webView.loadUrl("javascript:test_alert()");

            break;

        }

    }

}

三、main_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical" >

    <WebView

        android:id="@+id/webView"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

    <Button

        android:id="@+id/btn_js"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="调用javascript函数" />

</LinearLayout>

完成。

相关文章