Android WebView详解和调用JS

最新推荐文章于 2024-06-07 22:39:00 发布

chifu0892

最新推荐文章于 2024-06-07 22:39:00 发布

阅读量104

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://my.oschina.net/huangxianfeng/blog/807345

版权

前言

Android开发的过程的中，现在越来越多的项目接入网页来显示数据，那么就要求我们会使用WebView来显示网页内容，今天就简单讲解一下WebView的简单使用。

WebView在Android平台上是一个特殊的View，他能用来显示网页，这个类可以被用来在你的app中仅仅显示一张在线的网页，还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索等。

WebView的基本使用

（1）可以在XML布局中添加WebView：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.zhjy.hxf.hzwebview.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="3dip"
            android:progressDrawable="@drawable/proessbar_bg"
            android:visibility="gone" />

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

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/relativwlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <ProgressBar
            android:id="@+id/progressbar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>
</RelativeLayout>

然后在Activity中绑定的你空间：

WebView mWebView = (WebView)findViewById(R.id.webview);

（2）创建WebView的实例加入到Activity的view中：

WebView mWebView = new WebView(this);
setContentView(mWebView);

等都可以实现WebView的使用。

（3）然后就可以在网页：

//WebView加载web资源
 mWebView.loadUrl("https://www.baidu.com/");

实例使用

（1）设置网页顶部加载进度条（判断页面加载过程）：

WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    mProgressBar.setVisibility(View.GONE);
                } else {
                    mProgressBar.setVisibility(View.VISIBLE);
                    mProgressBar.setProgress(newProgress);
                }
            }
        });

（2）如果希望浏览的网页后退而不是退出浏览器，需要WebView覆盖URL加载，让它自动生成历史访问记录，那样就可以通过前进或后退访问已访问过的站点。

/**
     * 在onKeyDown中设置webView在返回的时候
     * 自动记录浏览记录
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK){
            if (mWebView.canGoBack()){
                mWebView.goBack();
                return true;
            }else {
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }

（3）创建一个自己的WebViewClient，通过setWebViewClient关联

//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
                view.loadUrl(url);
                return true;
            }

            /**
             * 1.网页页面开始加载的时候，执行的回调方法，可以实现加载等待界面
             * 2.在此方法中设置一个超时计时器
             * @param view
             * @param url
             * @param favicon
             */
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                mLinearLayout.setVisibility(View.GONE);
                mRelativeLayout.setVisibility(View.VISIBLE);
            }

            /**
             * 1.网页加载结束的时候，也要隐藏等待界面
             * 2.onPageFinished指页面加载完成,完成后取消计时器
             * @param view
             * @param url
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mLinearLayout.setVisibility(View.VISIBLE);
                mRelativeLayout.setVisibility(View.GONE);
            }

            /**
             * 加载异常的界面
             * @param view
             * @param request
             * @param error
             */
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.d("testTimeout", "-----------加载异常");
            }
        });

（4）访问的页面中有Javascript，则webview必须设置支持Javascript

WebSettings mWebSettings = mWebView.getSettings();
 mWebSettings.setJavaScriptEnabled(true);

（5）缓存的使用

优先使用缓存

mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

不使用缓存

mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

特殊使用

先给大家说说怎么获取这个html的标题title

应用开发的时候使用WebView这个组件的过程中可能会接触到WebViewClient与WebChromeClient，那么这两个类到底有什么不同呢，WebViewClient主要帮助WebView处理各种通知、请求事件的，比如：

        onLoadResource
        onPageStart
        onPageFinish
        onReceiveError
        onReceivedHttpAuthRequest

        WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如
        onCloseWindow(关闭WebView)
        onCreateWindow()
        onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
        onJsPrompt
        onJsConfirm
        onProgressChanged
        onReceivedIcon
        onReceivedTitle

我们在 WebChromeClient 中的 onReceivedTitle() 方法里判断html页面的标题中是否含有 “error”，如果有，则证明html加载失败，设置加载失败的标记，让在 WebViewClient 的完成是回调的 onPageFinish() 方法里显示自定义的加载失败的页面。

使用的是不要忘了添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

最后张贴一下全部代码：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private ProgressBar mProgressBar;
    private LinearLayout mLinearLayout;
    private RelativeLayout mRelativeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        init();
    }

    private void init() {
        mWebView = (WebView)findViewById(R.id.webview);
        mProgressBar = (ProgressBar)findViewById(R.id.progressBar);
        mLinearLayout = (LinearLayout)findViewById(R.id.linearlayout);
        mRelativeLayout = (RelativeLayout)findViewById(R.id.relativwlayout);

        //WebView加载web资源
        mWebView.loadUrl("https://www.baidu.com/");
        /**
         * 对WebView设置监听器
         */
        WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    mProgressBar.setVisibility(View.GONE);
                } else {
                    mProgressBar.setVisibility(View.VISIBLE);
                    mProgressBar.setProgress(newProgress);
                }
            }
        });

        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
                view.loadUrl(url);
                return true;
            }

            /**
             * 1.网页页面开始加载的时候，执行的回调方法，可以实现加载等待界面
             * 2.在此方法中设置一个超时计时器
             * @param view
             * @param url
             * @param favicon
             */
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                mLinearLayout.setVisibility(View.GONE);
                mRelativeLayout.setVisibility(View.VISIBLE);
            }

            /**
             * 1.网页加载结束的时候，也要隐藏等待界面
             * 2.onPageFinished指页面加载完成,完成后取消计时器
             * @param view
             * @param url
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mLinearLayout.setVisibility(View.VISIBLE);
                mRelativeLayout.setVisibility(View.GONE);
            }

            /**
             * 加载异常的界面
             * @param view
             * @param request
             * @param error
             */
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.d("testTimeout", "-----------加载异常");
            }
        });

        //设置访问文件
        mWebSettings.setAllowContentAccess(true);
        mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }


    /**
     * 在onKeyDown中设置webView在返回的时候
     * 自动记录浏览记录
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK){
            if (mWebView.canGoBack()){
                mWebView.goBack();
                return true;
            }else {
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

WebView调用JS的使用方式

（1）首先写js文件 js_test.js

function alertFromJs(content){
    alert("From js:" + content);
}

简单的一个函数，功能就是弹出一个alert。

写html文件 index.html，在html里加载js文件，注意路径。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="file:///android_asset/JsTest/js_test.js"></script>
    <title>JS Test</title>
</head>
<body>
<p>加载HTML网页成功!</p>
</body>
</html>

将index.html和js_test.js放到JsTest文件夹里，将JsTest放入到安卓工程assets中。写xml布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnCallJSAlert"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="CALL JS ALERT" />

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

MainActivity的所有代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView wvTest;
    private Button btnCallJSAlert;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wvTest = (WebView) findViewById(R.id.wvTest);
        btnCallJSAlert = (Button) findViewById(R.id.btnCallJSAlert);
        btnCallJSAlert.setOnClickListener(this);

        //处理Javascript的对话框，加载进度等。我们是一个用js弹出对话框的程序，所以这句必须加。
        wvTest.setWebChromeClient(new WebChromeClient());
        //拿到WebSettings
        WebSettings webSettings = wvTest.getSettings();
        //设置编码格式
        webSettings.setDefaultTextEncodingName("utf-8");
        //支持js
        webSettings.setJavaScriptEnabled(true);
        wvTest.loadUrl("file:///android_asset/JsTest/index.html");
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnCallJSAlert:
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    wvTest.evaluateJavascript("javascript:alertFromJs('加载网页的wvTest.evaluateJavascript')", new ValueCallback<String>() {
                        /**
                         * 网页上的Button回调方法
                         * @param value
                         */
                        @Override
                        public void onReceiveValue(String value) {
                            Log.i("TAG","网页上的Button回调方法：value = "+value);
                        }
                    });
                } else {
                    wvTest.loadUrl("javascript:alertFromJs('加载网页的wvTest.loadUrl')");
                }
                break;
        }
    }
}

转载请注明出处：

【定陶黄公子】（欢迎大家留言，讨论探讨）

博客转载：http://blog.csdn.net/huang3513/article/details/53639029

源码下载：http://download.csdn.net/detail/huang3513/9711162

转载于:https://my.oschina.net/huangxianfeng/blog/807345

chifu0892

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android WebView详解和调用JS

前言Android开发的过程的中，现在越来越多的项目接入网页来显示数据，那么就要求我们会使用WebView来显示网页内容，今天就简单讲解一下WebView的简单使用。WebView在Android平台上是一个特殊的View，他能用来显示网页，这个类可以被用来在你的app中仅仅显示一张在线...
复制链接

扫一扫