WebView與JS的交互與使用總結

webview是安卓展示html的控件,要想完美的使用webview必須要知道三個類:
1. WebSettings:設置webview的基本配置,包括js支持等。
2. WebViewClient :html在加載過程中的設置,包括頁面完成回掉等
3. WebChromeClient :alert()等js的響應函數處理
明白這三個類的使用 那webview就基本沒什麼難度了。下面貼代碼,代碼中做了比較詳細的註解,其中包括了js與android代碼的互相調用,js中alert函數的處理等

package com.iwintrue.androidapplication.web;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import com.iwintrue.androidapplication.R;

/**
 * Created by zhoukai on 2016/12/5.
 */

public class WebActivity extends Activity implements View.OnClickListener {

    WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.web_layout);
        initView();
    }

    private void initView() {
        mWebView = (WebView) findViewById(R.id.web);
        Button btn_addjs = (Button) findViewById(R.id.btn_addjs);
        btn_addjs.setOnClickListener(this);
        mWebView.setWebViewClient(new MyWebViewClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
        //允許js彈出窗口
        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        //js調用java方法,參數1:回掉的對象,參數2:對象名,這裏的方法名要和html中調用的對象名一致。
        mWebView.addJavascriptInterface(new JsObject(this), "client");
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b2 = new AlertDialog.Builder(WebActivity.this)
                        .setTitle("android的彈出框").setMessage(message)
                        .setPositiveButton("ok",
                                new AlertDialog.OnClickListener() {
                                    @Override
                                    public void onClick(DialogInterface dialog,
                                                        int which) {
                                        //點擊確認按鈕後操作的是js中的confirm函數
                                        result.confirm();
                                    }
                                });

                b2.setCancelable(false);
                b2.create();
                b2.show();
                return true;
            }
        });
        mWebView.loadUrl("file:///android_asset/test.htm");
    }

    /**
     * 點擊按鈕後調用js方法,test2()方法是在html中定義好的
     * 也可以自己定義方法回調
     * 加載js代碼的格式是javascripte:空格+方法名
     */

    @Override
    public void onClick(View v) {
        mWebView.loadUrl("javascript: test2()");
    }


    /**
     * html
     */
    class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            CookieManager cookitmanager = CookieManager.getInstance();
            String cookie = cookitmanager.getCookie(url);
            //獲取cookie值
            Log.i("main", "----cookie:" + cookie);
        }


    }

    class JsObject {
        Activity mActivity;
        public JsObject(Activity activity) {
            mActivity = activity;
        }

        //    測試方法
        @JavascriptInterface
        public String test() {
            Toast.makeText(mActivity, "test1", Toast.LENGTH_SHORT).show();
            return "java";
        }
    }
}

html頁面是加載的assets文件夾下的

<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>測試</title>
    <script type="text/javascript">
        function test(){
        //  alert( client.test());
        var  btn  = document.getElementById("btn");
          btn.innerHTML = "java";
        }
        function test2(){
            alert("哈哈哈哈哈");
            if(confirm("點擊確認後顯示的內容")){
                 btn.innerHTML = "嘿嘿";
            }
        }
    </script>
</head>
<body>
<br />
<button onclick="test()" id="btn">test</button>
</body>
</html>

最後是xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

    <Button
        android:id="@+id/btn_addjs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="加載js" />
</RelativeLayout>

以上就是webview與js的交互了,即使再複雜的js與android交互也不怕了,但是有一點,要真正的學會webview,基本的js知識必須要掌握。對於android開發來說,js學起來還是不難的。 有時間就學學吧!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章