Android中与JS进行交互

来源：互联网发布：省市区级联sql查询编辑：程序博客网时间：2024/05/22 17:01

背景

我们在开发Android应用的时候，很多的时候需要跟网页打交道，网页与原生Android之间的交互就涉及到Java与JS之间的相互方法

WebView的使用

我们在Android中如果希望展示一个网页，基本上都会使用WebView这个组件，它的基本使用也很简单，假如我们希望加载一下百度首页，可以像下面这样写：首先在layout文件中进行声明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <WebView         android:id="@+id/web_view"        android:layout_width="match_parent"        android:layout_height="match_parent" /></RelativeLayout>

然后在java文件中进行使用

WebView webView = (WebView) findViewById(R.id.web_view);webView.loadUrl("http://www.baidu.com");

同时，WebView还允许我们对一些默认设置进行修改，例如，我们希望启动对javascript的支持并且可以进行缩放，就需要做如下设置：

// 启用javascriptwebView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setUseWideViewPort(true);//是否可以缩放webView.getSettings().setSupportZoom(true);webView.getSettings().setBuiltInZoomControls(true);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {     getSettings().setDisplayZoomControls(false);}

但是，如果我们想要在页面加载的时候处理各种通知、请求事件，或者监听页面的加载进度等，就需要用到另外两个类：WebViewClient 和 WebChromeClient。其中，WebViewClient 主要用来监听通知或请求事件，我们在开发中可能会用到的方法主要是下面几个：

onPageStartedonPageFinishedonReceivedErrorshouldOverrideUrlLoading

public class CustomWebClient extends WebChromeClient {     @Override public void onProgressChanged(WebView view, int newProgress) {         if (newProgress == 100) {             mProgressBar.setVisibility(GONE);         } else {             if (mProgressBar.getVisibility() == GONE) {                 mProgressBar.setVisibility(VISIBLE);             }             mProgressBar.setProgress(newProgress);        }         super.onProgressChanged(view, newProgress);     }}

除此之外，WebView还提供了直接运行javascript的功能，例如，我们可以简单的弹出一个对话框：

webView.loadUrl("javascript:alert(\"提示信息！\");");

当然，如果我们想要执行js，那么必须满足两个条件，第一个是在设置中开启javascript支持，即需要调用setJavascriptEnabled(true)，第二个是需要设置WebChromeClient，两者缺一不可。

代码演示

1.首先来一段最最简单的jsp代码 <body>    <p>WebView与Javascript交互</p>    <div>        <button onClick="window.android.actionFromJs()">点击调用Android代码</button>    </div>    <br />    <div>        <button onClick="window.android.actionFromJsWithParam(' data come from Js')">点击调用Android代码并传递参数</button>    </div>    <br />    <div id="log_msg">调用打印信息</div>    </body>

不传递参数:    <button onClick="window.android.actionFromJs()">点击调用Android代码</button>    将参数传递到android代码中    <button onClick="window.android.actionFromJsWithParam('data come from Js')">点击调用Android代码并传递参数</button>

 // 启用javascript        mWebView.getSettings().setJavaScriptEnabled(true);     /** 为webview添加注册js 接口回调监听.         *         * 参数一: 接口对象         * 参数二: 接口别名(别名让js代码使用)         * 如果别名写"haha". 那么js中就要写window.haha.方法名         */        mWebView.addJavascriptInterface(this, "android");

/**     * js调用此方法     */    @android.webkit.JavascriptInterface    public void actionFromJs() {        runOnUiThread(new Runnable() {            @Override            public void run() {                Toast.makeText(MainActivity.this, "js调用了Android函数", Toast.LENGTH_SHORT).show();                String text = logTextView.getText() + "\njs调用了Android函数";                logTextView.setText(text);            }        });    }    /**     * js调用此方法. 并且将参数传递过来     *     * @param str js  传递过来的参数     */    @android.webkit.JavascriptInterface    public void actionFromJsWithParam(final String str) {        runOnUiThread(new Runnable() {            @Override            public void run() {                Toast.makeText(MainActivity.this, "js调用了Android函数传递参数：" + str, Toast.LENGTH_SHORT).show();                String text = logTextView.getText() + "\njs调用了Android函数传递参数：" + str;                logTextView.setText(text);            }        });    }

<html>    <head>    <script type="text/javascript">    // 无参方法    function actionFromNative() {        document.getElementById("log_msg").innerHTML += "<br\>Android调用了js函数";    }    //有参方法    function actionFromNativeWithParam(arg) {        document.getElementById("log_msg").innerHTML += ("<br\>Android调用了js函数并传递参数：" + arg);    }    </script>    </head>    <body>    <div id="log_msg">调用打印信息</div>    </body>    </html>

 /**         *  调用js.         *  WebView.loadUrl("javascript:js中定义的方法")         */        button.setOnClickListener(new Button.OnClickListener() {            public void onClick(View v) {                // 无参数调用  android端调用js 方法                mWebView.loadUrl("javascript:actionFromNative()");                // 传递参数调用                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");            }        });

/**         *  重写这个方法的话,加载页面就不会弹出浏览器打开了         */        mWebView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }            /**             *  页面加载完成回调             * @param view             * @param url             */            @Override            public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);            }        });

阅读全文

0 0

Android中与JS进行交互

背景

我们在开发Android应用的时候，很多的时候需要跟网页打交道，网页与原生Android之间的交互就涉及到Java与JS之间的相互方法

WebView的使用

我们在Android中如果希望展示一个网页，基本上都会使用WebView这个组件，它的基本使用也很简单，假如我们希望加载一下百度首页，可以像下面这样写： 首先在layout文件中进行声明

然后在java文件中进行使用

同时，WebView还允许我们对一些默认设置进行修改，例如，我们希望启动对javascript的支持并且可以进行缩放，就需要做如下设置：

除此之外，WebView还提供了直接运行javascript的功能，例如，我们可以简单的弹出一个对话框：

当然，如果我们想要执行js，那么必须满足两个条件，第一个是在设置中开启javascript支持，即需要调用setJavascriptEnabled(true)，第二个是需要设置WebChromeClient，两者缺一不可。

代码演示

我们在Android中如果希望展示一个网页，基本上都会使用WebView这个组件，它的基本使用也很简单，假如我们希望加载一下百度首页，可以像下面这样写：首先在layout文件中进行声明