WebView与JavaScript交互--Android

转载请注明出处: http://blog.csdn.net/forwardyzk/article/details/46819925

在工作中,有一个这种需求,须要用到WebView与javascript进行交互,以下我们就通过一个简单的需求来介绍.

先看一下效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

需求:

1.点击一个button进入一个载入WebView的界面,假设此界面须要分享此界面到其它平台,那么就在当前界面展示"分享"button,假设不须要分享,那么就不展示"分享"button.

2.在H5界面上,有一个登陆button,点击登陆,

2.1 假设没有登陆,则调起登陆界面,登陆成功后,在H5界面展示登陆者.

2.2 假设登陆了,就在H5界面直接显示当前的登陆者.

1.使webview支持js的调用.

webview.addJavascriptInterface(new JsHost(JsActivity.this, mHandler, webview), "jsObject");

当中JsHost是自己定义的一个类, jsObject是H5页面调用clientjs方法的对象(名字也是自己定义的,仅仅要和H5javascriprt用的对象名字一样就可以).

2.分享需求.

当H5页面载入完成后,H5页面调用client是否分享的方法(通过此方法讲是否分享和分享的内容传递给client),然后控制分享button是否展示

H5页面javascrip方法:

window.onload = function share() {

	//分享

	var json = "{'isShare':0,'shareContent':'我是分享内容'}";

	//不分享

	var noShare = "{'isShare':-1}";

	window.jsObject.toShare(json);

}

这是H5调用client的javascript方法

window:代表当前页面的对象

window.onload表示当前的H5页面载入完成后,调用后面的方法

json:表示须要分享的json字符串

noshare:表示不分享额json字符串

jsObject:是client定义的javascript对象

toShare(json):client的javascript方法,这样在client就能够收到json字符串.(这里传的是须要分享的json字符串)

在client的JsHost中定义javascript的分享方法

 /**

     * 分享的方法

     *

     * @param json

     */

    @JavascriptInterface

    public void toShare(String json) {

        Log.d(TAG, "web:" + json);

        try {

            JSONObject jsonObject = new JSONObject(json);

            int isShare = jsonObject.optInt("isShare");

            if (isShare == 0) {//表示须要分享

                mHandler.sendEmptyMessage(0);

            } else if (isShare == -1) { //表示不须要分享

                mHandler.sendEmptyMessage(1);

            }

        } catch (JSONException e) {

            Log.d(TAG, "解析异常");

        }

    }

首先要添加标识javascript的注解,@JavascriptInerface

解析传递过来的json字符串,通过Handler对象发送消息来控制分享button是否展示

在JsActivity方法中定义了mHandler,通过WebView的设置addJavascriprtInterface方法传递给了JsHost类中

JsActivty相应的不局文件:

activity_js.xml

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <Button

        android:id="@+id/btn_share"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="分享" />

    <WebView

        android:id="@+id/webview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@id/btn_share"></WebView>

</RelativeLayout>

private Handler mHandler = new Handler() {

        @Override

        public void handleMessage(Message msg) {

            if (msg.what == 0) {//显示分享

                btnShare.setVisibility(View.VISIBLE);//显示分享button

            } else if (msg.what == 1) {//隐藏分享button

                btnShare.setVisibility(View.GONE);//隐藏分享button

            } else if (msg.what == 2) {//调用登录

                Intent intent = new Intent(JsActivity.this, LoginActivity.class);

                startActivityForResult(intent, JsActivity.RESULT_OK);

            }

            super.handleMessage(msg);

        }

    };

3.登陆需求

3.1点击登陆,假设没有登陆,弹起登陆界面

先看H5页面点击登陆,调用client的js方法

<input id="loginName" type="button" onclick="isLogin()" value="登录">

function isLogin() {

	var name = window.jsObject.requestToken();

	document.getElementById("loginName").value = name;

}

点击"登录",调用了javascript中的isLogin()方法,在isLogin方法中调用client的requestToken()方法.此requestToken()有返回值,返回值是当前登陆者的名字.

client的requestToken方法

    /**

     * 请求登陆者

     *

     * @return

     */

    @JavascriptInterface

    public String requestToken() {

        if (TextUtils.isEmpty(App.getName())) {

            mHandler.sendEmptyMessage(2);

        }

        Log.d(TAG, "登陆者名字" + "name=" + App.getName());

        return TextUtils.isEmpty(App.getName()) ? "未登录" : App.getName();

    }

当中App操作登陆者的信息,有写入登陆者信息和读取登陆者信息

假设App.getName()获取登陆者的名字,假设为空,则通过mHandelr方法调起登录界面的通知.同一时候将当前登陆者返回给H5页面.

Intent intent = new Intent(JsActivity.this, LoginActivity.class);

                startActivityForResult(intent, JsActivity.RESULT_OK);

通过startActivityForResult方法开启登陆页面

startActivityForResult的用法请參考:点击

看一下登陆页面:

activity_login.xml

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_marginTop="10dp"

    android:orientation="vertical">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:gravity="center_vertical"

        android:orientation="horizontal">

        <TextView

            android:id="@+id/name_des"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerVertical="true"

            android:text="name:" />

        <EditText

            android:id="@+id/edit_name"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_centerVertical="true"

            android:layout_toRightOf="@id/name_des" />

    </RelativeLayout>

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:layout_marginTop="20dp"

        android:gravity="center_vertical"

        android:orientation="horizontal">

        <TextView

            android:id="@+id/pass_des"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerVertical="true"

            android:text="pass:" />

        <EditText

            android:id="@+id/edit_pass"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_centerVertical="true"

            android:layout_toRightOf="@id/pass_des" />

    </RelativeLayout>

    <Button

        android:id="@+id/btn_login"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        android:text="Login" />

</LinearLayout>

当点击了loginbutton,运行登陆操作

private void login() {

        String name = editName.getText().toString().trim();

        String pass = editPass.getText().toString().trim();

        if (TextUtils.isEmpty(name)) {

            Toast.makeText(getApplicationContext(), "name is empty", Toast.LENGTH_SHORT).show();

            return;

        } else if (TextUtils.isEmpty(pass)) {

            Toast.makeText(getApplicationContext(), "pass is empty", Toast.LENGTH_SHORT).show();

            return;

        } else {

            App.writeLoginInfo(name, pass);

            setResult(JsActivity.RESULT_OK);

            finish();

        }

    }

登陆成功后,把name和pass存到了App中

public class App extends Application {

    private static SharedPreferences sharedPreferences;

    @Override

    public void onCreate() {

        super.onCreate();

        sharedPreferences = getApplicationContext().getSharedPreferences("login", Context.MODE_PRIVATE);

    }

    public static void writeLoginInfo(String name, String pass) {

        sharedPreferences.edit().putString("name", name).putString("pass", pass).commit();

    }

    public static String getName() {

        return sharedPreferences.getString("name", "");

    }

}

同一时候在JsActivity中的onActivityResult方法中获取到通知,然后调用H5页面的loginSuccess方法,传递给H5client的登录者

@Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == RESULT_OK) {

            String name = App.getName();

            name = TextUtils.isEmpty(name) ?

"未登录" : name;

            Log.d(TAG, "onActivityResult:" + "name=" + name);

            //调用H5的javascript中的loginSuccess方法

            webview.loadUrl("javascript:loginSuccess('" + name + "')");

        }

    }

webview.loadUrl("javascript:loginSuccess('"+name+"')");

这是client调用H5中的javascript的方法.

function loginSuccess(name) {

	document.getElementById("loginName").value = name;

}

讲name赋给id为loginName控件的value属性.

loginSuccess:是H5中的javascript方法

name:是方法參数

总结:

使用webview的addJavascriprtInterface(操作的对象,"javascript对象名称");

H5调用client方法:

无返回值: window.javascript对象.clientjs方法;

有返回值: var value=window.javascript对象.clientjs方法;

client调用H5的方法:

webview.loadUrl("javascript:方法名称(參数)");

webview.loadUrl("javascript:方法名称()");

到此WebView与javascript方法互相调用已经解说完成,希望对大家有帮助,有不足之处往大家指出.

源代码下载: server和client的源代码

巴特西

WebView与JavaScript交互--Android

最新文章

热门文章