WebView與JavaScript交互--Android

 

在工作中,有一個這樣的需求,需要用到WebView與javascript進行交互,下面我們就通過一個簡單的需求來介紹.

先看一下效果圖:

 

需求:

1.點擊一個按鈕進入一個加載WebView的界面,如果此界面需要分享此界面到其他平台,那麼就在當前界面展示分享按鈕,如果不需要分享,那麼就不展示分享按鈕.

2.在H5界面上,有一個登陸按鈕,點擊登陸,

2.1 如果沒有登陸,則調起登陸界面,登陸成功後,在H5界面展示登陸者.

2.2 如果登陸了,就在H5界面直接顯示當前的登陸者.

1.使webview支持js的調用.

 

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

 

其中JsHost是自定義的一個類, jsObject是H5頁面調用客戶端js方法的對象(名字也是自定義的,只要和H5javascriprt用的對象名字一樣即可).

 

2.分享需求.

當H5頁面加載完畢後,H5頁面調用客戶端是否分享的方法(通過此方法講是否分享和分享的內容傳遞給客戶端),然後控制分享按鈕是否展示

H5頁面javascrip方法:

 

window.onload = function share() {
	//分享
	var json = {'isShare':0,'shareContent':'我是分享內容'};
	//不分享
	var noShare = {'isShare':-1};
	window.jsObject.toShare(json);
}

 

這是H5調用客戶端的javascript方法

window:代表當前頁面的對象

window.onload表示當前的H5頁面加載完畢後,調用後面的方法

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

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

jsObject:是客戶端定義的javascript對象

toShare(json):客戶端的javascript方法,這樣在客戶端就可以收到json字符串.(這裡傳的是需要分享的json字符串)

 

在客戶端的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對象發送消息來控制分享按鈕是否展示

 

在JsActivity方法中定義了mHandler,通過WebView的設置addJavascriprtInterface方法傳遞給了JsHost類中

JsActivty對應的不局文件:

activity_js.xml

 

 

 

private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0) {//顯示分享
                btnShare.setVisibility(View.VISIBLE);//顯示分享按鈕
            } else if (msg.what == 1) {//隱藏分享按鈕
                btnShare.setVisibility(View.GONE);//隱藏分享按鈕
            } 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頁面點擊登陸,調用客戶端的js方法

 

function isLogin() {
	var name = window.jsObject.requestToken();
	document.getElementById(loginName).value = name;
}

點擊登錄,調用了javascript中的isLogin()方法,在isLogin方法中調用客戶端的requestToken()方法.此requestToken()有返回值,返回值是當前登陸者的名字.

 

 

客戶端的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

 

當點擊了login按鈕,執行登陸操作

 

 

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方法,傳遞給H5客戶端的登錄者

 

@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+'));

這是客戶端調用H5中的javascript的方法.

 

function loginSuccess(name) {
	document.getElementById(loginName).value = name;
}

講name賦給id為loginName控件的value屬性.

 

loginSuccess:是H5中的javascript方法

name:是方法參數

 

 

總結:

使用webview的addJavascriprtInterface(操作的對象,javascript對象名稱);

H5調用客戶端方法:

無返回值: window.javascript對象.客戶端js方法;

有返回值: var value=window.javascript對象.客戶端js方法;

客戶端調用H5的方法:

webview.loadUrl(javascript：方法名稱(參數));

webview.loadUrl(javascript：方法名稱());

 

到此WebView與javascript方法互相調用已經講解完畢,希望對大家有幫助,有不足之處往大家指出.