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学起来还是不难的。 有时间就学学吧!

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