WebView與JavaScript互動--Android

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方法互相調用已經講解完畢,希望對大家有協助,有不足之處往大家指出.