Android之WebView学习

布满荆棘的人生 2022-09-25 05:13 210阅读 0赞

### WebView常用方法 ###

#### WebSettings ####

在使用WebView前我们都要进行相关的配置，常见的操作如下：

WebSettings settings = mWebView.getSettings();
            settings.setJavaScriptEnabled(true);    //支持javascript
            settings.setUseWideViewPort(true);    //设置webview推荐使用的窗口，使html界面自适应屏幕
            settings.setLoadWithOverviewMode(true);     //缩放至屏幕的大小
            settings.setAllowFileAccess(true);      //设置可以访问文件
    //        settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);    //设置中等像素密度，medium=160dpi
            settings.setSupportZoom(true);    //设置支持缩放
            settings.setLoadsImagesAutomatically(true);    //设置自动加载图片
    //        settings.setBlockNetworkImage(true);    //设置网页在加载的时候暂时不加载图片
    //        settings.setAppCachePath("");   //设置缓存路径
            settings.setCacheMode(WebSettings.LOAD_NO_CACHE);   //设置缓存模式

#### WebChromeClient ####

WebChromeClient主要是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等。

mWebView.setWebChromeClient(new WebChromeClient() {
                @Override
                public void onReceivedTitle(WebView view, String title) {
                    super.onReceivedTitle(view, title);
                    mTitle.setText(title);
                }
    
                @Override
                public void onProgressChanged(WebView view, int newProgress) {
                    super.onProgressChanged(view, newProgress);
                    if (newProgress == 100) {
                        mProgressBar.setVisibility(View.GONE);
                    }
                    mProgressBar.setProgress(newProgress);
                }
    
            });

#### WebViewClient ####

WebViewClient用来辅助WebView处理各种通知、请求事件的，例如在WebView中点击请求新的链接、页面加载开始、结束等：

mWebView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    return true;
                }
    
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                }
    
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                }
            });

#### 上\\下一个页面 ####

private void goBack(){
            if (mWebView.canGoBack()){
                mWebView.goBack();
            }else{
                finish();
            }
        }
    
    private void goForward() {
            if (mWebView.canGoForward()) {
                mWebView.goForward();
            }
        }

就是通过WebView的goBack()、goForward()方法。

#### 下载 ####

mWebView.setDownloadListener(new DownloadListener() {
                @Override
                public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype,
                                            long contentLength) {
    
                }
            });

### java与js交互 ###

首先编写一个简单的H5：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>js test</title>
    </head>
    
    <script type="text/javascript">
          function click1(){
         
             window.client.showMessage("来自js的消息");
          }
    
          function click2(msg){
         
             alert("来自java代码的消息:" + msg)
          }
    
    </script>
    <body>
        <input id="one" type="button"  value="js调用java代码" onclick="click1()"
         style="width:300px; height:150px; font-size:35px"/>
    </body>
    </html>

内容很简单，两个函数click1、click2，一个按钮，点击按钮执行click1函数。

将改H5文件放到assets目录，之后用WebView加载改H5：

mWebView.loadUrl("file:///android_asset/test.html");

接下来在Activity中编写一个特殊的类：

class JsOperation {
            @JavascriptInterface
            public void showMessage(String msg) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
        }

然后注入到WebView中：

mWebView.addJavascriptInterface(new JsOperation(), "client");

注意和js中的这行代码对比下：

window.client.showMessage("来自js的消息");

其中client就是addJavascriptInterface()的第二个参数，当然这个参数可以自定义，但要保持一致。js中调用的showMessage()方法，就是我们JsOperation类中的方法。

点击H5中的按钮，可以看到一个Toast提示：

![p1.gif][]

到这里就完成了js对java代码的调用，接下来看如下通过java代码调用js。  
其实很简单：

mWebView.loadUrl("javascript:click2" + "(" + 1008611 + ")");

这样就可以执行js中的click2函数了。我们通过模拟器返回键执行这行代码，可以看到一个提示框，即click2函数得到执行：

![p2.gif][]

### 模拟原生应用的页面跳转 ###

效果

![p2.jpg][]

首先可以在Activity的onCreate()中创建一个栈，并将当前Activity入栈：

if (mStack == null) {
                mStack = new Stack<>();
            }
    
     mStack.push(this);

在WebView中继续加载新页面时：

@Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    Intent intent = new Intent(MainActivity.this, MainActivity.class);
                    intent.putExtra("url", url);
                    startActivity(intent);
    
                    return true;
                }

我们重写了shouldOverrideUrlLoading()，重新启动当前Activity来加载新链接，则一个新的Activtiy会入栈，这样就有了跳转的效果。  
在返回上一个界面时进行出栈操作：

private void popActivity() {
            if (mStack.size() > 0) {
                mStack.remove(this);
                this.finish();
            }
        }

**源码**

[源码][Link 1]

**参考链接**

[Android 你应该知道的WebView - 简书][Android _WebView -]

[p1.gif]: /images/20220718/941d79c372df4896805769bb1173816c.png
[p2.gif]: /images/20220718/e47004e56f1241cdb351adb768dd5d20.png
[p2.jpg]: /images/20220718/d2496c4b2c444e5ebedfd7f57c1c5a95.png
[Link 1]: http://download.csdn.net/detail/shehuan320_/9599706
[Android _WebView -]: http://www.jianshu.com/p/d533d2d44814

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 android开发，使用kotlin学习WebView（详细）

随着后台技术的不断发展，App前端的应用都布置了Web页面的界面，这个界面就是由WebView组件渲染出来的。WebView由如下优点：可以直接显示和渲染Web页面或者网页；可

╰+哭是因爲堅強的太久メ/ 2024年04月08日 11:17/ 0 赞/ 50 阅读

相关 Android之WebView学习

WebView常用方法 WebSettings 在使用WebView前我们都要进行相关的配置，常见的操作如下： WebSettings settings

布满荆棘的人生/ 2022年09月25日 05:13/ 0 赞/ 211 阅读

相关 Android WebView(一) WebView详解

WebView，在Android开发中，我们总是会遇到，它是Google封装的，使用WebKit渲染引擎加载显示网页。接下来，我们就详细看看WebView的介绍以及使用。

骑猪看日落/ 2022年08月19日 13:13/ 0 赞/ 302 阅读

相关 Android之webView入门

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。 webview有两个方法：setWebChromeClient 和 setWebClient

逃离我推掉我的手/ 2022年07月27日 15:51/ 0 赞/ 193 阅读

相关初学者Android--WebView

首先是布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi

一时失言乱红尘/ 2022年06月07日 00:11/ 0 赞/ 262 阅读

相关 Android之WebView

WebView恐怕是每个Android工程师用得最多的控件之一，它可以加载多种形式的网络页面。这无疑也是Android的核心功能之一。一个最简单的WebView使用代码如下

深藏阁楼爱情的钟/ 2022年05月19日 00:19/ 0 赞/ 303 阅读

相关 Android WebView 总结

文章来源： http://www.eoeandroid.com/thread-25177-1-1.html 1、添加权限：AndroidManifest.xml中必须

古城微笑少年丶/ 2022年04月12日 12:15/ 0 赞/ 250 阅读

相关 webview学习

Android中WebView使用6，js调java实现播放视频 [https://blog.csdn.net/zhaihaohao1/article/details/7

╰+攻爆jí腚メ/ 2021年11月16日 06:56/ 0 赞/ 210 阅读

相关 Android之提示Failed to load WebView provider: No WebView installed

1 问题 Fatal Exception: android.util.AndroidRuntimeException: android.webkit.WebVie

Love The Way You Lie/ 2021年09月25日 07:38/ 0 赞/ 1956 阅读

相关 Android+WebView

> WebView是Android手机内置的一款高性能webkit内核浏览器，它是封装在SDK中的一个组件。通过使用WebView,可以很简易的与页面进行交互和数据处理，

梦里梦外;/ 2021年09月16日 19:46/ 0 赞/ 406 阅读