Android—android与js交互以及相互传参

Android中可以通过WebView来实现与js的交互，让用户可以在android客户端看到js写的页面，接下来为大家介绍的就是怎样实现此功能：

首先android项目目录下有“assets”文件夹，开发者需要将html文件拷贝到此文件夹下。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0032)http://localhost:8080/jsandroid/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-store,no-cache"> <meta name="Handheldfriendly" content="true"><meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes"><meta name="robots" content="all"><meta name="keywords" contect="doodle, mobile, doodlemobile, game, games"><meta name="description" content="Make People&#39;s Mobile Life More Connected Through Games."><title>jsandroid_test</title><script type="text/javascript" language="javascript"> 
   //此方法是调用了android的方法HtmlcallJava2()；    function showHtmlcallJava2(){        var str = document.getElementById("id_input").value        var str1 = document.getElementById("id_input2").value
    //调用android中的方法        window.jsObj.HtmlcallJava2(str+","+str1);        }    </script></head><body>hello IT-homer<br><br><br><br><input id="id_input" style="width: 90%" type="text" value="null" /><br><br><input id="id_input2" style="width: 90%" type="text" value="null" /><br></body></html>

xml布局文件，很简单：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    tools:context=".JSAndroidActivity" >    <WebView        android:id="@+id/mWebView"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="clickView"        android:text="获取" /></LinearLayout>

mainActivity中的核心代码是：
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(jsInterface, "jsObj"); mWebView.loadUrl("file:///android_asset/index.html");
请理解核心代码的详细注释

mainActivity代码：

package com.homer.jsandroid;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.StringTokenizer;import android.R.anim;import android.annotation.SuppressLint;import android.app.Activity;import android.content.pm.ActivityInfo;import android.os.Bundle;import android.os.Handler;import android.view.KeyEvent;import android.view.View;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.TextView;import android.widget.Toast;public class JSAndroidActivity extends Activity {    private Activity mActivity = null;    private WebView mWebView = null;    private String message;    private JsInterface jsInterface;    private String[] params = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mActivity = this;        // 锁定横屏        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);        setContentView(R.layout.main);        params = new String[2];        jsInterface = new JsInterface();        showWebView();    }    @SuppressLint("SetJavaScriptEnabled")    private void showWebView() {        try {            mWebView = (WebView) findViewById(R.id.mWebView);            mWebView.requestFocus();            mWebView.setWebChromeClient(new WebChromeClient() {                @Override                public void onProgressChanged(WebView view, int progress) {                    JSAndroidActivity.this.setTitle("Loading...");                    JSAndroidActivity.this.setProgress(progress);                    if (progress >= 80) {                        JSAndroidActivity.this.setTitle("JsAndroid Test");                    }                }            });            mWebView.setOnKeyListener(new View.OnKeyListener() {                @Override                public boolean onKey(View v, int keyCode, KeyEvent event) {                    if (keyCode == KeyEvent.KEYCODE_BACK                            && mWebView.canGoBack()) {                        mWebView.goBack();                        return true;                    }                    return false;                }            });            // WebView的管理设置状态            WebSettings webSettings = mWebView.getSettings();            // 设置android下容许执行js的脚本            webSettings.setJavaScriptEnabled(true);            // 编码方式            webSettings.setDefaultTextEncodingName("utf-8");            /*             * 使用这个函数将一个对象绑定到Javascript,因此可以从Javascript访问的方法,             * Android（Java）与js（HTML）交互的接口函数, jsObj 为桥连对象可随意设值             */            mWebView.addJavascriptInterface(jsInterface, "jsObj");            /*             * Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：             * mWebView.loadUrl("javascript: showFromHtml()");             */            mWebView.loadUrl("file:///android_asset/index.html");        } catch (Exception e) {            e.printStackTrace();        }    }    private class JsInterface {        /**         * js中通过window.jsObj.HtmlcallJava2("参数") 可以调用此方法并且把js中input中的值作为参数传入，         * 但这是在点击js中的按钮得到的，若实现点击java中的按钮得到，需要方法 clickView(View v)         *          * @param param         */        public void HtmlcallJava2(final String param) {            message = param;            String str = message;            StringTokenizer st = new StringTokenizer(str, ",;");            while (st.hasMoreTokens()) {                for (int i = 0; i < params.length; i++) {                    params[i] = st.nextToken();                    System.out.println(params[i]);                }            }            Toast.makeText(JSAndroidActivity.this, param, Toast.LENGTH_SHORT)                    .show();        }    }    /**     * button的点击事件     *      * @param v     */    public void clickView(View v) {        runOnUiThread(new Runnable() {            @Override            public void run() {                /**                 * 调用js中的方法实现点击java中的按钮得到js中input的值                 */                mWebView.loadUrl("javascript: showHtmlcallJava2()");            }        });    }}

希望给大家带来帮助，谢谢!

更多相关文章

随机推荐