webview_webview ssl - CSDN
  • WebView介绍和简单使用

    2020-02-01 10:15:42
    熟练掌握WPS表格的基本操作 熟练掌握WPS表格的使用技巧
  • WebView

    2016-05-30 17:23:20
    带领对Android憧憬的同学,走向一条神奇的道路!
  • 其实这是Android里一个叫WebView组件实现今天,我将献上一份全面介绍 WebView的常见用法。目录文章目录1. 简介WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的web....

    前言

    • 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

      京东首页

    • 那么这种该如何实现呢?其实这是Android里一个叫WebView组件实现

    • 今天,我将献上一份全面介绍 WebView的常见用法。

    目录

    文章目录

    1. 简介

    WebView是一个基于webkit引擎、展现web页面的控件。

    Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。

    2. 作用

    • 显示和渲染Web页面
    • 直接使用html文件(网络上或本地assets中)作布局
    • 可和JavaScript交互调用

    WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。


    3. 使用介绍

    一般来说Webview可单独使用,可联合其工具类一起使用,所以接下来,我会介绍:

    • Webview类自身的常见方法
    • Webview的最常用的工具类:WebSettings类、WebViewClient类、WebChromeClient类
    • Android 和 Js的交互

    3.1 Webview类常用方法

    3.1.1 加载url

    加载方式根据资源分为三种

    
      //方式1. 加载一个网页:
      webView.loadUrl("http://www.google.com/");
    
      //方式2:加载apk包中的html页面
      webView.loadUrl("file:///android_asset/test.html");
    
      //方式3:加载手机本地的html页面
       webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
    
       // 方式4: 加载 HTML 页面的一小段内容
      WebView.loadData(String data, String mimeType, String encoding)
    // 参数说明:
    // 参数1:需要截取展示的内容
    // 内容里不能出现 ’#’, ‘%’, ‘\’ , ‘?’ 这四个字符,若出现了需用 %23, %25, %27, %3f 对应来替代,否则会出现异常
    // 参数2:展示内容的类型
    // 参数3:字节码
    
    
    

    3.1.1 WebView的状态

    //激活WebView为活跃状态,能正常执行网页的响应
    webView.onResume() ;
    
    //当页面被失去焦点被切换到后台不可见状态,需要执行onPause
    //通过onPause动作通知内核暂停所有的动作,比如DOM的解析、plugin的执行、JavaScript执行。
    webView.onPause();
    
    //当应用程序(存在webview)被切换到后台时,这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
    //它会暂停所有webview的layout,parsing,javascripttimer。降低CPU功耗。
    webView.pauseTimers()
    //恢复pauseTimers状态
    webView.resumeTimers();
    
    //销毁Webview
    //在关闭了Activity时,如果Webview的音乐或视频,还在播放。就必须销毁Webview
    //但是注意:webview调用destory时,webview仍绑定在Activity上
    //这是由于自定义webview构建时传入了该Activity的context对象
    //因此需要先从父容器中移除webview,然后再销毁webview:
    rootLayout.removeView(webView); 
    webView.destroy();
    

    3.1.2 关于前进 / 后退网页

    //是否可以后退
    Webview.canGoBack() 
    //后退网页
    Webview.goBack()
    
    //是否可以前进                     
    Webview.canGoForward()
    //前进网页
    Webview.goForward()
    
    //以当前的index为起始点前进或者后退到历史记录中指定的steps
    //如果steps为负数则为后退,正数则为前进
    Webview.goBackOrForward(intsteps) 
    

    常见用法:Back键控制网页后退

    • 问题:在不做任何处理前提下 ,浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
    • 目标:点击返回后,是网页回退而不是推出浏览器
    • 解决方案:在当前Activity中处理并消费掉该 Back 事件
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
    

    3.1.3 清除缓存数据

    //清除网页访问留下的缓存
    //由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
    Webview.clearCache(true);
    
    //清除当前webview访问的历史记录
    //只会webview访问历史记录里的所有记录除了当前访问记录
    Webview.clearHistory();
    
    //这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
    Webview.clearFormData();
    

    3.2 常用工具类

    3.2.1 WebSettings类

    • 作用:对WebView进行配置和管理
    • 配置步骤 & 常见方法:

    配置步骤1:添加访问网络权限(AndroidManifest.xml)

    这是前提!这是前提!这是前提!

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

    配置步骤2:生成一个WebView组件(有两种方式)

    //方式1:直接在在Activity中生成
    WebView webView = new WebView(this)
    
    //方法2:在Activity的layout文件里添加webview控件:
    WebView webview = (WebView) findViewById(R.id.webView1);
    

    配置步骤3:进行配置-利用WebSettings子类(常见方法)

    //声明WebSettings子类
    WebSettings webSettings = webView.getSettings();
    
    //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
    webSettings.setJavaScriptEnabled(true);  
    // 若加载的 html 里有JS 在执行动画等操作,会造成资源浪费(CPU、电量)
    // 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可
    
    //支持插件
    webSettings.setPluginsEnabled(true); 
    
    //设置自适应屏幕,两者合用
    webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
    webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
    
    //缩放操作
    webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。
    webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
    webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
    
    //其他细节操作
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
    webSettings.setAllowFileAccess(true); //设置可以访问文件 
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
    webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
    webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
    

    常见用法:设置WebView缓存

    • 当加载 html 页面时,WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
    • 请求的 URL记录保存在 WebViewCache.db,而 URL的内容是保存在 WebViewCache 文件夹下
    • 是否启用缓存:
        //优先使用缓存: 
        WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
            //缓存模式如下:
            //LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
            //LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
            //LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
            //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
    
        //不使用缓存: 
        WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    
    • 结合使用(离线加载)
    if (NetStatusUtil.isConnected(getApplicationContext())) {
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根据cache-control决定是否从网络上取数据。
    } else {
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网,则从本地获取,即离线加载
    }
    
    webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
    webSettings.setDatabaseEnabled(true);   //开启 database storage API 功能
    webSettings.setAppCacheEnabled(true);//开启 Application Caches 功能
    
    String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
    webSettings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录
    

    注意: 每个 Application 只调用一次 WebSettings.setAppCachePath(),WebSettings.setAppCacheMaxSize()

    3.2.2 WebViewClient类

    • 作用:处理各种通知 & 请求事件
    • 常见方法:

    常见方法1:shouldOverrideUrlLoading()

    • 作用:打开网页时不调用系统浏览器, 而是在本WebView中显示;在网页上的所有加载都经过这个方法,这个函数我们可以做很多操作。
    //步骤1. 定义Webview组件
    Webview webview = (WebView) findViewById(R.id.webView1);
    
    //步骤2. 选择加载方式
      //方式1. 加载一个网页:
      webView.loadUrl("http://www.google.com/");
    
      //方式2:加载apk包中的html页面
      webView.loadUrl("file:///android_asset/test.html");
    
      //方式3:加载手机本地的html页面
       webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
    
    //步骤3. 复写shouldOverrideUrlLoading()方法,使得打开网页时不调用系统浏览器, 而是在本WebView中显示
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
              view.loadUrl(url);
          return true;
          }
      });
    

    常见方法2:onPageStarted()

    • 作用:开始载入页面调用的,我们可以设定一个loading的页面,告诉用户程序在等待网络响应。
       webView.setWebViewClient(new WebViewClient(){
         @Override
         public void  onPageStarted(WebView view, String url, Bitmap favicon) {
            //设定加载开始的操作
         }
     });
    

    常见方法3:onPageFinished()

    • 作用:在页面加载结束时调用。我们可以关闭loading 条,切换程序动作。
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public void onPageFinished(WebView view, String url) {
             //设定加载结束的操作
          }
      });
    

    常见方法4:onLoadResource()

    • 作用:在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次。
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public boolean onLoadResource(WebView view, String url) {
             //设定加载资源的操作
          }
      });
    

    常见方法5:onReceivedError()

    • 作用:加载页面的服务器出现错误时(如404)调用。

    App里面使用webview控件的时候遇到了诸如404这类的错误的时候,若也显示浏览器里面的那种错误提示页面就显得很丑陋了,那么这个时候我们的app就需要加载一个本地的错误提示页面,即webview如何加载一个本地的页面

    //步骤1:写一个html文件(error_handle.html),用于出错时展示给用户看的提示页面
    //步骤2:将该html文件放置到代码根目录的assets文件夹下
    
    //步骤3:复写WebViewClient的onRecievedError方法
    //该方法传回了错误码,根据错误类型可以进行不同的错误分类处理
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
    switch(errorCode)
                    {
                    case HttpStatus.SC_NOT_FOUND:
                        view.loadUrl("file:///android_assets/error_handle.html");
                        break;
                    }
                }
            });
    

    常见方法6:onReceivedSslError()

    • 作用:处理https请求

    webView默认是不处理https请求的,页面显示空白,需要进行如下设置:

    webView.setWebViewClient(new WebViewClient() {    
            @Override    
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {    
                handler.proceed();    //表示等待证书响应
            // handler.cancel();      //表示挂起连接,为默认方式
            // handler.handleMessage(null);    //可做其他处理
            }    
        });  
    
    // 特别注意:5.1以上默认禁止了https和http混用,以下方式是开启
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    mWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }
    

    3.2.3 WebChromeClient类

    • 作用:辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等。
    • 常见使用:

    常见方法1: onProgressChanged()

    • 作用:获得网页的加载进度并显示
    webview.setWebChromeClient(new WebChromeClient(){
    
          @Override
          public void onProgressChanged(WebView view, int newProgress) {
              if (newProgress < 100) {
                  String progress = newProgress + "%";
                  progress.setText(progress);
                } else {
            }
        });
    

    常见方法2: onReceivedTitle()

    • 作用:获取Web页中的标题

    每个网页的页面都有一个标题,比如www.baidu.com这个页面的标题即“百度一下,你就知道”,那么如何知道当前webview正在加载的页面的title并进行设置呢?

    webview.setWebChromeClient(new WebChromeClient(){
    
        @Override
        public void onReceivedTitle(WebView view, String title) {
           titleview.setText(title);
        }
    

    常见方法3: onJsAlert()

    • 作用:支持javascript的警告框

    一般情况下在 Android 中为 Toast,在文本里面加入\n就可以换行

    webview.setWebChromeClient(new WebChromeClient() {
                
                @Override
                public boolean onJsAlert(WebView view, String url, String message, final JsResult result)  {
        new AlertDialog.Builder(MainActivity.this)
                .setTitle("JsAlert")
                .setMessage(message)
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                })
                .setCancelable(false)
                .show();
        return true;
                }
    

    常见方法4: onJsConfirm()

    • 作用:支持javascript的确认框
    webview.setWebChromeClient(new WebChromeClient() {
            
                @Override
    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
        new AlertDialog.Builder(MainActivity.this)
                .setTitle("JsConfirm")
                .setMessage(message)
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                })
                .setCancelable(false)
                .show();
    // 返回布尔值:判断点击时确认还是取消
    // true表示点击了确认;false表示点击了取消;
        return true;
    }
    
                
    

    常见方法5: onJsPrompt()

    • 作用:支持javascript输入框

    点击确认返回输入框中的值,点击取消返回 null。

    webview.setWebChromeClient(new WebChromeClient() {
                @Override
                public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
        final EditText et = new EditText(MainActivity.this);
        et.setText(defaultValue);
        new AlertDialog.Builder(MainActivity.this)
                .setTitle(message)
                .setView(et)
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm(et.getText().toString());
                    }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                })
                .setCancelable(false)
                .show();
    
        return true;
    }
                
    

    3.3 WebView与JavaScript的交互

    具体请看我写的文章:最全面 & 最详细的 Android WebView与JS的交互方式 汇总

    3.4 注意事项:如何避免WebView内存泄露?

    3.4.1 不在xml中定义 Webview ,而是在需要的时候在Activity中创建,并且Context使用 getApplicationgContext()

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mWebView = new WebView(getApplicationContext());
            mWebView.setLayoutParams(params);
            mLayout.addView(mWebView);
    

    3.4.2 在 Activity 销毁( WebView )的时候,先让 WebView 加载null内容,然后移除 WebView,再销毁 WebView,最后置空。

    @Override
        protected void onDestroy() {
            if (mWebView != null) {
                mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
                mWebView.clearHistory();
    
                ((ViewGroup) mWebView.getParent()).removeView(mWebView);
                mWebView.destroy();
                mWebView = null;
            }
            super.onDestroy();
        }
    

    4. 实例

    • 目标:实现显示“www.baidu.com”、获取其标题、提示加载开始 & 结束和获取加载进度
    • 具体实现:

    步骤1:添加访问网络权限

    这是前提!这是前提!这是前提!

    AndroidManifest.xml

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

    步骤2:主布局
    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.example.carson_ho.webview_demo.MainActivity">
    
    
       <!-- 获取网站的标题-->
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--开始加载提示-->
        <TextView
            android:id="@+id/text_beginLoading"
            android:layout_below="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--获取加载进度-->
        <TextView
            android:layout_below="@+id/text_beginLoading"
            android:id="@+id/text_Loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--结束加载提示-->
        <TextView
            android:layout_below="@+id/text_Loading"
            android:id="@+id/text_endLoading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
        
        <!--显示网页区域-->
        <WebView
            android:id="@+id/webView1"
            android:layout_below="@+id/text_endLoading"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="10dp" />
    </RelativeLayout>
    
    

    步骤3:根据需要实现的功能从而使用相应的子类及其方法(注释很清楚了)
    MainActivity.java

    package com.example.carson_ho.webview_demo;
    
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.KeyEvent;
    import android.view.ViewGroup;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.TextView;
    
    
    public class MainActivity extends AppCompatActivity {
        WebView mWebview;
        WebSettings mWebSettings;
        TextView beginLoading,endLoading,loading,mtitle;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            mWebview = (WebView) findViewById(R.id.webView1);
            beginLoading = (TextView) findViewById(R.id.text_beginLoading);
            endLoading = (TextView) findViewById(R.id.text_endLoading);
            loading = (TextView) findViewById(R.id.text_Loading);
            mtitle = (TextView) findViewById(R.id.title);
    
            mWebSettings = mWebview.getSettings();
    
            mWebview.loadUrl("http://www.baidu.com/");
    
            
            //设置不用系统浏览器打开,直接显示在当前Webview
            mWebview.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }
            });
    
            //设置WebChromeClient类
            mWebview.setWebChromeClient(new WebChromeClient() {
    
    
                //获取网站标题
                @Override
                public void onReceivedTitle(WebView view, String title) {
                    System.out.println("标题在这里");
                    mtitle.setText(title);
                }
    
    
                //获取加载进度
                @Override
                public void onProgressChanged(WebView view, int newProgress) {
                    if (newProgress < 100) {
                        String progress = newProgress + "%";
                        loading.setText(progress);
                    } else if (newProgress == 100) {
                        String progress = newProgress + "%";
                        loading.setText(progress);
                    }
                }
            });
    
    
            //设置WebViewClient类
            mWebview.setWebViewClient(new WebViewClient() {
                //设置加载前的函数
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    System.out.println("开始加载了");
                    beginLoading.setText("开始加载了");
    
                }
    
                //设置结束加载函数
                @Override
                public void onPageFinished(WebView view, String url) {
                    endLoading.setText("结束加载了");
    
                }
            });
        }
    
        //点击返回上一页面而不是退出浏览器
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) {
                mWebview.goBack();
                return true;
            }
    
            return super.onKeyDown(keyCode, event);
        }
    
        //销毁Webview
        @Override
        protected void onDestroy() {
            if (mWebview != null) {
                mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
                mWebview.clearHistory();
    
                ((ViewGroup) mWebview.getParent()).removeView(mWebview);
                mWebview.destroy();
                mWebview = null;
            }
            super.onDestroy();
        }
    }
    
    

    Demo地址

    源代码:Carson_Ho的Github-WebviewDemo


    5. 总结

    • 本文全面介绍了Webview,总结如下
    示意图


    展开全文
  • [Android基础] WebView

    2016-10-05 13:18:29
    Web AppsWebViewAndroid4.4 webview实现分析Android WebView使用深入浅出深入讲解WebView(上) - 互调,缓存,异常处理等深入讲解WebView(下) - session,cookie等Android WebView Memory Leak WebView内存泄漏 ==!...

    [ Demo下载 ]

    资源

    1. Web Apps
    2. WebView
    3. Android4.4 webview实现分析
    4. Android WebView使用深入浅出
    5. 深入讲解WebView(上) - 互调,缓存,异常处理等
    6. 深入讲解WebView(下) - session,cookie等
    7. Android WebView Memory Leak WebView内存泄漏 ==! 这个我用leakcanary没检测出来
    8. PHP、Android、iOS 的恩恩怨怨

    从Android 4.4(KitKat)开始,WebView组件是基于开源的Chromium项目.包含V8 js引擎并支持新的web标准,新webView也共享Chrome for Android的渲染引擎,另外,从5.0(Lollipop)开始,WebView被移到独立的apk中,因此它可以进行单独更新,可以从 “settings – Apps – Android System WebView” 中查看其版本;

    用途

    默认情况下,webView不启用js交互,并会忽略页面错误,适用于展示静态信息;
    也可以启用js功能,实现与用户的交互

    辅助类

    • WebChromeClient 当可能影响webView UI的操作发生时会调用到该类,比如进度变化或者js提示框…
    • WebViewClient 当可能影响内容渲染的操作发生时会调用到该类,比如错误等…另外,可以通过重写 shouldOverrideUrlLoading() 来中断url的加载;
    • WebSettings 功能设置,比如可否允许js代码;

    基本操作

    • 访问网络的话需要添加网络权限
    <uses-permission android:name="android.permission.INTERNET" />
    • 1
    • 启用js功能
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    • 1
    • 2

    设置返回键回退功能

    mWv.setOnKeyListener(new View.OnKeyListener() {
                @Override
                public boolean onKey(View v, int keyCode, KeyEvent event) {
                    // 需要添加 mWv.canGoBack(),不然当返回到初始页面时,可能无法继续通过返回键关闭页面
                    if (keyCode == KeyEvent.KEYCODE_BACK && mWv.canGoBack()) {
                        mWv.goBack();
                        return true;
                    }
                    return false;
                }
            });
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    也可以通过设置所在Activity的onBackPressed()方法来支持webView回退:

    @Override
    public void onBackPressed() {
        if (mWv.canGoBack()) {
            mWv.goBack();
        } else {
            super.onBackPressed();
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    设置标题

    mWv.setWebChromeClient(new WebChromeClient(){
        @Override
        public void onReceivedTitle(WebView view, String title) {
            // title 是获取到的网页title,可以将之设置为webView所在页面的标题
            MainActivity.this.setTitle(title);
        }
    )};
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    设置加载进度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //requestWindowFeature(Window.FEATURE_PROGRESS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //getWindow().setFeatureInt(Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);
        ......
    
        mProgressDlg = new ProgressDialog(this);
        mProgressDlg.setMessage("loading...");
    
        mWv.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //更新进度条示数
    
                //这种方式我没看到效果...
                //MainActivity.this.setProgress(newProgress);
    
                //使用控件ProgressDialog来显示进度
                //但记得这种方式需要在error发生时也进行取消
                if (newProgress <= 90) {
                    mProgressDlg.setProgress(newProgress);
                } else {
                    mProgressDlg.dismiss();
                }
            }
        });
    
        mWv.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                // 加载某些网站的时候会报:ERR_CONNECTION_REFUSED,因此需要在这里取消进度条的显示
                Toast.makeText(MainActivity.this, "error", Toast.LENGTH_SHORT).show();
                if (mProgressDlg.isShowing()) {
                    mProgressDlg.dismiss();
                }
            }
    
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                if (!mProgressDlg.isShowing()) {
                    mProgressDlg.show();
                }
            }
    
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                if (mProgressDlg.isShowing()) {
                    mProgressDlg.dismiss();
                }
            }
        });
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    控制url跳转

    mWv.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // 这个方法我没有重写的话也还是使用webView来加载链接
            // 而且我这里测试返回的true/false貌似没什么影响
    
            if (Uri.parse(url).getHost().endsWith("jianshu.com")) {
                //若是指定服务器的链接则在当前webView中跳转
                view.loadUrl(url);
                return false;
            } else if (Uri.parse(url).getHost().length() == 0) {
                // 本地链接的话直接在webView中跳转
                return false;
            }
    
            // 其他情况则使用系统浏览器打开网址
            Uri uri = Uri.parse(url);
            Intent intent = new Intent(Intent.ACTION_VIEW, uri);
            startActivity(intent);
            return true;
        }
    });
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    加载页面

    1. 加载本地asset文件

     mWv.loadUrl("file:///android_asset/index.html");
    • 1

    2. 加载本地网页2

    //index.html文件放置于 src/main/assets 目录中
    myWebView.loadUrl("file:///android_asset/index.html");
    • 1
    • 2

    3. 加载网页

    myWebView.loadUrl("http://www.jianshu.com/users/302253a7ed00/latest_articles");
    • 1

    4. 解析html字符串

    String summary = "<!DOCTYPE html>\n" +
            "<html lang=\"zh_CN\">\n" +
            "<head>\n" +
            "    <meta charset=\"UTF-8\">\n" +
            "    <title>webViewDemoFromAsset</title>\n" +
            "    <script src=\"js/basic.js\"></script>\n" +
            "</head>\n" +
            "<body>\n" +
            "<div>\n" +
            "    <button id=\"btn\" onclick='showToast()'>调用android toast</button>\n" +
            "</div>\n" +
            "\n" +
            "<label id='label'>js android代码互调测试</label>\n" +
            "\n" +
            "<br>\n" +
            "<a href=\"http://www.jianshu.com/users/302253a7ed00/latest_articles/\">个人主页</a>\n" +
            "</body>\n" +
            "</html>";
    
    // 官网例子给的下面的写法,但是会出现中文乱码,
    // 原因:http://blog.csdn.net/top_code/article/details/9163597
    // mWv.loadData(summary, "text/html", "utf-8");
    
    mWv.loadData(summary, "text/html;charset=UTF-8", null);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    使用android studio的话,项目结构中没有asset目录,需要手动创建 src/main/assets 目录即可;
    扩展:
    1. 如果html文件存于sdcard:则加前缀:content://com.android.htmlfileprovider/sdcard/
       另外, content 前缀可能导致异常,直接使用 file:///sdcard/ 或者 file:/sdcard 也可以;
    2. 也可使用 locaData() ,先将文件读取出来,在传入字符串到方法中,可以用于展示页面,但不会引用css,js等文件;

    js与andorid互调

    1. 通过 addJavaScriptInterface() 来设置接口,传入实例和类名,让js可以调用;
      Note: The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.
      允许网页调用android功能可以存在风险,比如加载其他网页,默认做法是使用浏览器去加载外部其他网页;
    2. 自定义的js对应andoird实现类
    //通过webView按钮调用android toast功能
    public class BasicJsAppInterface {
        private Context cxt;
        public BasicJsAppInterface(Context cxt) {
            this.cxt = cxt;
        }
        // 如果targetSDKVersion设置为17以上,这里需要添加该annotation标志
        @JavascriptInterface
        public void showToast() {
            Toast.makeText(this.cxt, "toast in android", Toast.LENGTH_SHORT).show();
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    // 实现js调用android功能
    WebView mWv = (WebView) findViewById(R.id.wv);
     WebSettings wvSettings = mWv.getSettings();
    wvSettings.setJavaScriptEnabled(true);
    wvSettings.setDefaultTextEncodingName("utf-8");
    //传入实现js功能的android实例 以及 js调用时使用的名称
    mWv.addJavascriptInterface(new BasicJsAppInterface(this), "AndroidApp");
    //加载本地asset文件,以 `file:///` 开头
    mWv.loadUrl("file:///android_asset/index.html");
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    1. js 调用 android 功能

    // 在src/main/assets 目录(不存在则手动创建)中创建该html文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webViewDemoFromAsset</title>
        <script src="js/basic.js"></script>
    </head>
    <body>
    <div>
        <button id="btn" onclick='showToast()'>调用android toast</button>
    </div>
    
    <label id='label'>js android代码互调测试</label>
    
    <br>
    <a href="http://lucid-lynxz.github.io/">github主页</a>
    <a href="http://www.jianshu.com/users/302253a7ed00/latest_articles">简书主页</a>
    
    <video width="400" controls>
        <source src="res/shuai_dan_ge.mp4" type="video/mp4">
        <source src="res/gongsi_de_liliang.flv" type="video/flv">
        <p>不支持该格式视频</p>
    </video>
    </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    注意
    :这里引入的独立js文件标签不能简写成 `
    //在 assets/js/ 目录下创建js独立文件basic.js,当然也可以把这些代码直接嵌入到html中
    function setLabel(id, label) {
        document.getElementById(id).innerHTML = label;
    }
    
    function showToast(){
      AndroidApp.showToast(); //也可以写成window.AndroidApp.showToast();
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2. android 调用js代码:

    //前缀javascript, `setLabel()是网页js文件中定义的方法`
    mWv.loadUrl("javascript:setLabel('label','通过android调用js代码')");
    • 1
    • 2

    缓存/Cookie

    webview应用的缓存文件放置于 /data/data/{yourProjectName}/ 下面,之前想提取webview缓存的图片,往上查找的资料大都是通过 webviewcache.db 来获取图片对应的缓存文件,但是我在红米1s4.4以及nexus6p 6.0系统上都没有再发现这个文件了,新的缓存目录结构:

    webview缓存的资源文件位置

    从上图可以发现 Cookies 文件存在,使用16进制编辑器打开查看,也可在程序中获取:

    private String getCookie() {
        CookieManager cm = CookieManager.getInstance();
        String cookie = cm.getCookie(mUrl);
        if (TextUtils.isEmpty(cookie)) {
            cookie = "there is no cookie exist";
        }
        return cookie;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    另外,图中红色方框内的文件就是缓存的文件了,它们名称是如何跟实际资源文件对应起来的,这个我还没弄懂,不过还是可以获取缓存图片的,我们使用16进制编辑器来查看,可以发现头部有该图片的url地址(“?g….d64d.png”):

    ff8def31493d3be1_0 文件内容

    我们删除该文件的url地址信息,保存后,修改后缀名为png,即可看到实际的图片:

    删除图片地址信息

    实际的图片(右侧)

    播放视频

    支持标准MP4,ogg之类的,flash得启用插件进行播放,不考虑 [官网](http://developer.android.com/intl/zh-cn/reference/android/webkit/WebView.html) 建议播放视频的时候开启硬件加速,不过我在nexus6p上没有开(默认开了吗?)也ok的;

    全屏播放

    [参考](http://blog.csdn.net/zrzlj/article/details/8050633)

    页面适应

    [Pixel-Perfect UI in the WebView](https://developer.chrome.com/multidevice/webview/pixelperfect)
    • 一个针对移动端优化过的页面带有如下类似的属性:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    • 1
    系统将页面显示在一个虚拟的Viewport中,这个视口通常比屏幕大,这样网页就不会被限制在很小的范围内,用户可以通过缩放和平移来查看内容;
    • 对于无法控制内容的线上网页,可以通过代码方式设置ViewPort:
    //强制手机使用 desktop-size viewport
    wvSettings.setUseWideViewPort(true);
    wvSettings.setLoadWithOverviewMode(true);
    • 1
    • 2
    • 3

    扩展-响应式

    调试

    1. chrome
      需要在电脑上安装Chrome32以上的版本;

    2. 在电脑上启动浏览器打开网址 chrome://inspect ,

    3. android启用webView调试
      条件:

      • android 4.4以上
      • 允许远端调试
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        // 官网: https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews
        // 官网说WebView不受manifest的debuggable标签的影响,若需要在该标签启用时才允许调试,则添加如下条件判断(注意:尽量不要在manifest中显式指定debuggable属性,放空即可,这样Android Studio会自动在调试时设置成true,在release版本中设置成false)
        int debuggable = getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE;
        if (0 != debuggable) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    注意事项

    1. All WebView methods must be called on the same thread
      wv.loadUrl() 方法放在主线程(根据错误提示来指定)中执行;
      P.S. webview类中有checkThread()方法,跟初始的Lopper.myLooper做比较,想跟踪setContentView看看,结果源码不全,断点跟踪不知道跟到哪里去了…后续得再补补;
    2. html页面应用独立的js文件时,script不能写成自闭合标签,否则浏览器解析可能会出错;
    3. 官方建议WebView的height属性设置为 match_parent 或者指定值,而非 wrap_content ,同事设置为 match_parent 后,其各个父容器不允许设置height为 wrap_content ,否则可能导致异常发生;
    4. android 4.4对webView做了些变化,可以参考 [这篇文章](Migrating to WebView in Android 4.4);
    5. 混淆时,需要设置javaScriptInterface不被混淆
    # app/proguard-rules.pro
    -keep public class org.lynxz.webviewdemo.BasicJsAppInterface{
        public <methods>;
    }
    -keepattributes *Annotation*
    -keepattributes *JavascriptInterface*
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    异常

    1. 内存泄露

    这个我还没测试,Android WebView Memory Leak WebView内存泄漏
    ==! 然后查了内存检查:
    Android最佳性能实践(二)——分析内存的使用情况

    这里有人发现android 5.1也有类似的情况,我没有尝试加载很多页面,先记录下来:
    Android 5.1 Webview 内存泄漏新场景

    2. loadData() 中文乱码

    参考这篇

    mWv.loadData(yourHtmlString, "text/html;charset=UTF-8", null);
    • 1

    有人说这么设置也可以避免乱码,但是我在nexus 6p上没测试成功:

    wvSettings.setDefaultTextEncodingName("utf-8");
    • 1

    3. eglCodecCommon: ** ERROR unknown type 0x73000f (glSizeof,80)

    Genymotion模拟器不支持硬件加速,关闭即可:
    mWv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

    4. html中含有angular.js,数据获取成功,但是显示空白:

    已启用js支持:
    mWv.getSettings().setJavaScriptEnabled(true);

    logCat报错:

    I/xxx: url = http://fep-web.debug.web.nd/#!/report/student/compositive?client=phone&mode=debug&user_id=2079947956
    D/dalvikvm: GC_FOR_ALLOC freed 37K, 14% free 21151K/24528K, paused 17ms, total 17ms
    I/dalvikvm-heap: Grow heap (frag case) to 25.837MB for 3288976-byte allocation
    W/AwContents: nativeOnDraw failed; clearing to background color.
    I/Timeline: Timeline: Activity_idle id: android.os.BinderProxy@425bdee8 time:31230137
    I/chromium: [INFO:CONSOLE(39)] "Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.10/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.10%2F%24injector%2Fmodulerr%3Fp0%3Dapp-theme%26p1%3DTypeError%253...<omitted>...3)", source: http://fep-web.debug.web.nd/bower_components/angular/angular.min.js?v=201604181940 (39)
    I/chromium: [INFO:CONSOLE(72)] "error_log:localStorage error", source: http://fep-web.debug.web.nd/js-error.no-ng.js (72)
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    我也不懂angular.js用到了什么,添加下dom支持就可以了:

    settings.setDomStorageEnabled(true);
    • 1

    5. A WebView method was called on thread ‘JavaBridge’. All WebView methods must be called on the same thread.

    webview加载了网页后,在html中点击重新加载网页,我之前直接在接口类的方法中直接运行,

    @JavascriptInterface
    public void retriveToUrl(String url) {
        mWv.loadUrl(url);
    }
    • 1
    • 2
    • 3
    • 4

    需要将其放置在ui线程中运行:

    The JavaScript method is executed on a background (i.e. non-UI) thread. You need to call all Android View related methods on the UI thread.

    @JavascriptInterface
    public void retriveToUrl(String url) {
        mWv.post(new Runnable() {
            @Override
            public void run() {
                mWebView.loadUrl(...).
            }
        });
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    6. “TypeError: Object [object Object] has no method ‘callNative’ - 混淆

    在release版本中,js代码调用不到我定义的接口类中的方法,从混淆文件中把这个类排除即可;
    js interface proguard

    展开全文
  • 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现 今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本文前请先阅读:Android开发:最全面、最易懂的Webview详解 ...

    前言

    • 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

    京东首页

    • 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现
    • 今天我将全面介绍Android通过WebView与JS交互的全面方式

    阅读本文前请先阅读:Android开发:最全面、最易懂的Webview详解


    #目录

    目录


    1. 交互方式总结

    Android与JS通过WebView互相调用方法,实际上是:

    • Android去调用JS的代码
    • JS去调用Android的代码

    二者沟通的桥梁是WebView

    对于Android调用JS代码的方法有2种:

    1. 通过WebViewloadUrl()
    2. 通过WebViewevaluateJavascript()

    对于JS调用Android代码的方法有3种:

    1. 通过WebViewaddJavascriptInterface()进行对象映射
    2. 通过 WebViewClientshouldOverrideUrlLoading ()方法回调拦截 url
    3. 通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息

    2. 具体分析

    2.1 Android通过WebView调用 JS 代码

    对于Android调用JS代码的方法有2种:

    1. 通过WebViewloadUrl()
    2. 通过WebViewevaluateJavascript()

    方式1:通过WebViewloadUrl()

    • 实例介绍:点击Android按钮,即调用WebView JS(文本名为javascript)中callJS()
    • 具体使用:

    步骤1:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

    1. 为了方便展示,本文是采用Andorid调用本地JS代码说明;
    2. 实际情况时,Android更多的是调用远程JS代码,即将加载的JS代码路径改成url即可

    需要加载JS代码:javascript.html

    // 文本名:javascript
    <!DOCTYPE html>
    <html>
    
       <head>
          <meta charset="utf-8">
          <title>Carson_Ho</title>
          
    // JS代码
         <script>
    // Android需要调用的方法
       function callJS(){
          alert("Android调用了JS的callJS方法");
       }
    </script>
    
       </head>
    
    </html>
    

    步骤2:在Android里通过WebView设置调用JS代码

    Android代码:MainActivity.java

    注释已经非常清楚

     public class MainActivity extends AppCompatActivity {
    
        WebView mWebView;
        Button button;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mWebView =(WebView) findViewById(R.id.webview);
    
            WebSettings webSettings = mWebView.getSettings();
    
            // 设置与Js交互的权限
            webSettings.setJavaScriptEnabled(true);
            // 设置允许JS弹窗
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    
            // 先载入JS代码
            // 格式规定为:file:///android_asset/文件名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");
    
            button = (Button) findViewById(R.id.button);
    
    
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 通过Handler发送消息
                    mWebView.post(new Runnable() {
                        @Override
                        public void run() {
    
                            // 注意调用的JS方法名要对应上
                            // 调用javascript的callJS()方法
                            mWebView.loadUrl("javascript:callJS()");
                        }
                    });
                    
                }
            });
    
            // 由于设置了弹窗检验调用结果,所以需要支持js对话框
            // webview只是载体,内容的渲染需要使用webviewChromClient类去实现
            // 通过设置WebChromeClient对象处理JavaScript的对话框
            //设置响应js 的Alert()函数
            mWebView.setWebChromeClient(new WebChromeClient() {
                @Override
                public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                    AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                    b.setTitle("Alert");
                    b.setMessage(message);
                    b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    });
                    b.setCancelable(false);
                    b.create().show();
                    return true;
                }
    
            });
    
    
        }
    }
    

    效果图

    特别注意:JS代码调用一定要在 onPageFinished() 回调之后才能调用,否则不会调用。

    onPageFinished()属于WebViewClient类的方法,主要在页面加载结束时调用

    方式2:通过WebViewevaluateJavascript()

    • 优点:该方法比第一种方法效率更高、使用更简洁。
    1. 因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
    2. Android 4.4 后才可使用
    • 具体使用
    // 只需要将第一种方法的loadUrl()换成下面该方法即可
        mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
            }
        });
    }
    

    2.1.2 方法对比

    方式对比图

    2.1.3 使用建议

    两种方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2

    // Android版本变量
    final int version = Build.VERSION.SDK_INT;
    // 因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断
    if (version < 18) {
        mWebView.loadUrl("javascript:callJS()");
    } else {
        mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
            }
        });
    }
    

    2.2 JS通过WebView调用 Android 代码

    对于JS调用Android代码的方法有3种:

    1. 通过WebViewaddJavascriptInterface()进行对象映射
    2. 通过 WebViewClientshouldOverrideUrlLoading ()方法回调拦截 url
    3. 通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息

    2.2.1 方法分析

    方式1:通过 WebViewaddJavascriptInterface()进行对象映射

    步骤1:定义一个与JS对象映射关系的Android类:AndroidtoJs

    AndroidtoJs.java(注释已经非常清楚)

    // 继承自Object类
    public class AndroidtoJs extends Object {
    
        // 定义JS需要调用的方法
        // 被JS调用的方法必须加入@JavascriptInterface注解
        @JavascriptInterface
        public void hello(String msg) {
            System.out.println("JS调用了Android的hello方法");
        }
    }
    

    步骤2:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

    需要加载JS代码:javascript.html

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8">
          <title>Carson</title>  
          <script>
             
            
             function callAndroid(){
            // 由于对象映射,所以调用test对象等于调用Android映射的对象
                test.hello("js调用了android中的hello方法");
             }
          </script>
       </head>
       <body>
          //点击按钮则调用callAndroid函数
          <button type="button" id="button1" "callAndroid()"></button>
       </body>
    </html>
    

    步骤3:在Android里通过WebView设置Android类与JS代码的映射

    详细请看注释

    public class MainActivity extends AppCompatActivity {
    
        WebView mWebView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mWebView = (WebView) findViewById(R.id.webview);
            WebSettings webSettings = mWebView.getSettings();
    
            // 设置与Js交互的权限
            webSettings.setJavaScriptEnabled(true);
    
            // 通过addJavascriptInterface()将Java对象映射到JS对象
            //参数1:Javascript对象名
            //参数2:Java对象名
            mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
    
            // 加载JS代码
            // 格式规定为:file:///android_asset/文件名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");
    
    

    效果图

    特点

    • 优点:使用简单

    仅将Android对象和JS对象映射即可

    方式2:通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

    • 具体原理:
    1. Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
    2. 解析该 url 的协议
    3. 如果检测到是预先约定好的协议,就调用相应方法

    即JS需要调用Android的方法

    • 具体使用:
      步骤1:在JS约定所需要的Url协议
      JS代码:javascript.html

    以.html格式放到src/main/assets文件夹里

    <!DOCTYPE html>
    <html>
    
       <head>
          <meta charset="utf-8">
          <title>Carson_Ho</title>
          
         <script>
             function callAndroid(){
                /*约定的url协议为:js://webview?arg1=111&arg2=222*/
                document.location = "js://webview?arg1=111&arg2=222";
             }
          </script>
    </head>
    
    <!-- 点击按钮则调用callAndroid()方法  -->
       <body>
         <button type="button" id="button1" "callAndroid()">点击调用Android代码</button>
       </body>
    </html>
    

    当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后,就会回调shouldOverrideUrlLoading (),接下来继续看步骤2:

    步骤2:在Android通过WebViewClient复写shouldOverrideUrlLoading ()

    MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
        WebView mWebView;
    //    Button button;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mWebView = (WebView) findViewById(R.id.webview);
    
            WebSettings webSettings = mWebView.getSettings();
    
            // 设置与Js交互的权限
            webSettings.setJavaScriptEnabled(true);
            // 设置允许JS弹窗
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    
            // 步骤1:加载JS代码
            // 格式规定为:file:///android_asset/文件名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");
    
    
    // 复写WebViewClient类的shouldOverrideUrlLoading方法
    mWebView.setWebViewClient(new WebViewClient() {
                                          @Override
                                          public boolean shouldOverrideUrlLoading(WebView view, String url) {
    
                                              // 步骤2:根据协议的参数,判断是否是所需要的url
                                              // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
                                              //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)
    
                                              Uri uri = Uri.parse(url);                                 
                                              // 如果url的协议 = 预先约定的 js 协议
                                              // 就解析往下解析参数
                                              if ( uri.getScheme().equals("js")) {
    
                                                  // 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议
                                                  // 所以拦截url,下面JS开始调用Android需要的方法
                                                  if (uri.getAuthority().equals("webview")) {
    
                                                     //  步骤3:
                                                      // 执行JS所需要调用的逻辑
                                                      System.out.println("js调用了Android的方法");
                                                      // 可以在协议上带有参数并传递到Android上
                                                      HashMap<String, String> params = new HashMap<>();
                                                      Set<String> collection = uri.getQueryParameterNames();
    
                                                  }
    
                                                  return true;
                                              }
                                              return super.shouldOverrideUrlLoading(view, url);
                                          }
                                      }
            );
       }
            }
    
    

    效果图

    特点

    • 优点:不存在方式1的漏洞;
    • 缺点:JS获取Android方法的返回值复杂。

    如果JS想要得到Android方法的返回值,只能通过 WebView 的 loadUrl ()去执行 JS 方法把返回值传递回去,相关的代码如下:

    // Android:MainActivity.java
    mWebView.loadUrl("javascript:returnResult(" + result + ")");
    
    // JS:javascript.html
    function returnResult(result){
        alert("result is" + result);
    }
    

    #方式3:通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息

    在JS中,有三个常用的对话框方法:

    Paste_Image.png

    方式3的原理:Android通过 WebChromeClientonJsAlert()onJsConfirm()onJsPrompt()方法回调分别拦截JS对话框
    (即上述三个方法),得到他们的消息内容,然后解析即可。

    下面的例子将用**拦截 JS的输入框(即prompt()方法)**说明 :

    1. 常用的拦截是:拦截 JS的输入框(即prompt()方法)
    2. 因为只有prompt()可以返回任意类型的值,操作最全面方便、更加灵活;而alert()对话框没有返回值;confirm()对话框只能返回两种状态(确定 / 取消)两个值

    步骤1:加载JS代码,如下:
    javascript.html

    以.html格式放到src/main/assets文件夹里

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8">
          <title>Carson_Ho</title>
          
         <script>
            
    	function clickprompt(){
        // 调用prompt()
        var result=prompt("js://demo?arg1=111&arg2=222");
        alert("demo " + result);
    }
    
          </script>
    </head>
    
    <!-- 点击按钮则调用clickprompt()  -->
       <body>
         <button type="button" id="button1" "clickprompt()">点击调用Android代码</button>
       </body>
    </html>
    

    当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后,就会触发回调onJsPrompt(),具体如下:

    1. 如果是拦截警告框(即alert()),则触发回调onJsAlert()
    2. 如果是拦截确认框(即confirm()),则触发回调onJsConfirm()

    步骤2:在Android通过WebChromeClient复写onJsPrompt()

    public class MainActivity extends AppCompatActivity {
    
        WebView mWebView;
    //    Button button;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mWebView = (WebView) findViewById(R.id.webview);
    
            WebSettings webSettings = mWebView.getSettings();
    
            // 设置与Js交互的权限
            webSettings.setJavaScriptEnabled(true);
            // 设置允许JS弹窗
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    
    // 先加载JS代码
            // 格式规定为:file:///android_asset/文件名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");
    
    
            mWebView.setWebChromeClient(new WebChromeClient() {
                                            // 拦截输入框(原理同方式2)
                                            // 参数message:代表promt()的内容(不是url)
                                            // 参数result:代表输入框的返回值
                                            @Override
                                            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                                                // 根据协议的参数,判断是否是所需要的url(原理同方式2)
                                                // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
                                                //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)
    
                                                Uri uri = Uri.parse(message);
                                                // 如果url的协议 = 预先约定的 js 协议
                                                // 就解析往下解析参数
                                                if ( uri.getScheme().equals("js")) {
    
                                                    // 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议
                                                    // 所以拦截url,下面JS开始调用Android需要的方法
                                                    if (uri.getAuthority().equals("webview")) {
    
                                                        //
                                                        // 执行JS所需要调用的逻辑
                                                        System.out.println("js调用了Android的方法");
                                                        // 可以在协议上带有参数并传递到Android上
                                                        HashMap<String, String> params = new HashMap<>();
                                                        Set<String> collection = uri.getQueryParameterNames();
    
                                                        //参数result:代表消息框的返回值(输入值)
                                                        result.confirm("js调用了Android的方法成功啦");
                                                    }
                                                    return true;
                                                }
                                                return super.onJsPrompt(view, url, message, defaultValue, result);
                                            }
    
    // 通过alert()和confirm()拦截的原理相同,此处不作过多讲述
    
                                            // 拦截JS的警告框
                                            @Override
                                            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                                                return super.onJsAlert(view, url, message, result);
                                            }
    
                                            // 拦截JS的确认框
                                            @Override
                                            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                                                return super.onJsConfirm(view, url, message, result);
                                            }
                                        }
            );
    
    
                }
    
            }
    

    效果图

    2.2.2 三种方式的对比 & 使用场景

    示意图


    3. 总结

    • 本文主要对Android通过WebView与JS的交互方式进行了全面介绍

    示意图


    请帮顶和评论点赞!因为你们的赞同/鼓励是我写作的最大动力!


    欢迎关注carson_ho的微信公众号

    示意图

    示意图

    展开全文
  • 其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。 目录1. 简介WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内

    前言

    • 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图
      京东首页.jpg

    • 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。


    目录

    文章目录


    1. 简介

    WebView是一个基于webkit引擎、展现web页面的控件。

    Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。


    2. 作用

    • 显示和渲染Web页面
    • 直接使用html文件(网络上或本地assets中)作布局
    • 可和JavaScript交互调用

    WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。


    3. 使用介绍

    一般来说Webview可单独使用,可联合其子类一起使用,所以接下来,我会介绍:

    • Webview自身的常见方法;
    • Webview的最常用的子类
      (WebSettings类、WebViewClient类、WebChromeClient类)
    • Android和Js的交互

    3.1 Webview常用方法

    3.1.1 WebView的状态

    //激活WebView为活跃状态,能正常执行网页的响应
    webView.onResume() ;
    
    //当页面被失去焦点被切换到后台不可见状态,需要执行onPause
    //通过onPause动作通知内核暂停所有的动作,比如DOM的解析、plugin的执行、JavaScript执行。
    webView.onPause();
    
    //当应用程序(存在webview)被切换到后台时,这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
    //它会暂停所有webview的layout,parsing,javascripttimer。降低CPU功耗。
    webView.pauseTimers()
    //恢复pauseTimers状态
    webView.resumeTimers();
    
    //销毁Webview
    //在关闭了Activity时,如果Webview的音乐或视频,还在播放。就必须销毁Webview
    //但是注意:webview调用destory时,webview仍绑定在Activity上
    //这是由于自定义webview构建时传入了该Activity的context对象
    //因此需要先从父容器中移除webview,然后再销毁webview:
    rootLayout.removeView(webView); 
    webView.destroy();
    

    3.1.2 关于前进 / 后退网页

    //是否可以后退
    Webview.canGoBack() 
    //后退网页
    Webview.goBack()
    
    //是否可以前进                     
    Webview.canGoForward()
    //前进网页
    Webview.goForward()
    
    //以当前的index为起始点前进或者后退到历史记录中指定的steps
    //如果steps为负数则为后退,正数则为前进
    Webview.goBackOrForward(intsteps) 
    

    常见用法:Back键控制网页后退

    • 问题:在不做任何处理前提下 ,浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
    • 目标:点击返回后,是网页回退而不是推出浏览器
    • 解决方案:在当前Activity中处理并消费掉该 Back 事件
    public boolean onKeyDown(int keyCode, KeyEvent event) {
    	if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
    		mWebView.goBack();
    		return true;
    	}
    	return super.onKeyDown(keyCode, event);
    }
    

    3.1.3 清除缓存数据

    //清除网页访问留下的缓存
    //由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
    Webview.clearCache(true);
    
    //清除当前webview访问的历史记录
    //只会webview访问历史记录里的所有记录除了当前访问记录
    Webview.clearHistory();
    
    //这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
    Webview.clearFormData();
    

    3.2 常用类

    3.2.1 WebSettings类

    • 作用:对WebView进行配置和管理
    • 配置步骤 & 常见方法:

    配置步骤1:添加访问网络权限(AndroidManifest.xml)

    这是前提!这是前提!这是前提!

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

    配置步骤2:生成一个WebView组件(有两种方式)

    //方式1:直接在在Activity中生成
    WebView webView = new WebView(this)
    
    //方法2:在Activity的layout文件里添加webview控件:
    WebView webview = (WebView) findViewById(R.id.webView1);
    

    配置步骤3:进行配置-利用WebSettings子类(常见方法)

    //声明WebSettings子类
    WebSettings webSettings = webView.getSettings();
    
    //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
    webSettings.setJavaScriptEnabled(true);  
    
    //支持插件
    webSettings.setPluginsEnabled(true); 
    
    //设置自适应屏幕,两者合用
    webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
    webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
    
    //缩放操作
    webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。
    webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
    webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
    
    //其他细节操作
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
    webSettings.setAllowFileAccess(true); //设置可以访问文件 
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
    webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
    webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
    

    常见用法:设置WebView缓存

    • 当加载 html 页面时,WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
    • 请求的 URL记录保存在 WebViewCache.db,而 URL的内容是保存在 WebViewCache 文件夹下
    • 是否启用缓存:
    	//优先使用缓存: 
        WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
            //缓存模式如下:
            //LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
            //LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
            //LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
            //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
    
    	//不使用缓存: 
    	WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    
    • 结合使用(离线加载)
    if (NetStatusUtil.isConnected(getApplicationContext())) {
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根据cache-control决定是否从网络上取数据。
    } else {
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网,则从本地获取,即离线加载
    }
    
    webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
    webSettings.setDatabaseEnabled(true);   //开启 database storage API 功能
    webSettings.setAppCacheEnabled(true);//开启 Application Caches 功能
    
    String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
    webSettings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录
    

    注意: 每个 Application 只调用一次 WebSettings.setAppCachePath(),WebSettings.setAppCacheMaxSize()

    3.2.2 WebViewClient类

    • 作用:处理各种通知 & 请求事件
    • 常见方法:

    常见方法1:shouldOverrideUrlLoading()

    • 作用:打开网页时不调用系统浏览器, 而是在本WebView中显示;在网页上的所有加载都经过这个方法,这个函数我们可以做很多操作。
    //步骤1. 定义Webview组件
    Webview webview = (WebView) findViewById(R.id.webView1);
    
    //步骤2. 选择加载方式
      //方式1. 加载一个网页:
      webView.loadUrl("http://www.google.com/");
    
      //方式2:加载apk包中的html页面
      webView.loadUrl("file:///android_asset/test.html");
    
      //方式3:加载手机本地的html页面
       webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
    
    //步骤3. 复写shouldOverrideUrlLoading()方法,使得打开网页时不调用系统浏览器, 而是在本WebView中显示
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
              view.loadUrl(url);
          return true;
          }
      });
    

    常见方法2:onPageStarted()

    • 作用:开始载入页面调用的,我们可以设定一个loading的页面,告诉用户程序在等待网络响应。
     webView.setWebViewClient(new WebViewClient(){
          @Override
          public void  onPageStarted(WebView view, String url, Bitmap favicon) {
             //设定加载开始的操作
          }
      });
      
    

    常见方法3:onPageFinished()

    • 作用:在页面加载结束时调用。我们可以关闭loading 条,切换程序动作。
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public void onPageFinished(WebView view, String url) {
             //设定加载结束的操作
          }
      });
    

    常见方法4:onLoadResource()

    • 作用:在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次。
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public boolean onLoadResource(WebView view, String url) {
             //设定加载资源的操作
          }
      });
    

    常见方法5:onReceivedError()

    • 作用:加载页面的服务器出现错误时(如404)调用。

    App里面使用webview控件的时候遇到了诸如404这类的错误的时候,若也显示浏览器里面的那种错误提示页面就显得很丑陋了,那么这个时候我们的app就需要加载一个本地的错误提示页面,即webview如何加载一个本地的页面

    //步骤1:写一个html文件(error_handle.html),用于出错时展示给用户看的提示页面
    //步骤2:将该html文件放置到代码根目录的assets文件夹下
    
    //步骤3:复写WebViewClient的onRecievedError方法
    //该方法传回了错误码,根据错误类型可以进行不同的错误分类处理
        webView.setWebViewClient(new WebViewClient(){
          @Override
          public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
    switch(errorCode)
                    {
                    case HttpStatus.SC_NOT_FOUND:
                        view.loadUrl("file:///android_assets/error_handle.html");
                        break;
                    }
                }
            });
    

    常见方法6:onReceivedSslError()

    • 作用:处理https请求

    webView默认是不处理https请求的,页面显示空白,需要进行如下设置:

    webView.setWebViewClient(new WebViewClient() {    
            @Override    
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {    
                handler.proceed();    //表示等待证书响应
            // handler.cancel();      //表示挂起连接,为默认方式
            // handler.handleMessage(null);    //可做其他处理
            }    
        });    
    

    3.2.3 WebChromeClient类

    • 作用:辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等。
    • 常见使用:

    常见方法1: onProgressChanged()

    • 作用:获得网页的加载进度并显示
    webview.setWebChromeClient(new WebChromeClient(){
    
          @Override
          public void onProgressChanged(WebView view, int newProgress) {
              if (newProgress < 100) {
                  String progress = newProgress + "%";
                  progress.setText(progress);
                } else {
            }
        });
    

    常见方法2: onReceivedTitle()

    • 作用:获取Web页中的标题

    每个网页的页面都有一个标题,比如www.baidu.com这个页面的标题即“百度一下,你就知道”,那么如何知道当前webview正在加载的页面的title并进行设置呢?

    webview.setWebChromeClient(new WebChromeClient(){
    
        @Override
        public void onReceivedTitle(WebView view, String title) {
           titleview.setText(title);
        }
    

    3.3 WebView与JS的交互

    具体请看我写的文章 Android WebView与JS的交互方式 最全面汇总

    3.4 注意事项:如何避免WebView内存泄露?

    3.4.1 不在xml中定义 Webview ,而是在需要的时候在Activity中创建,并且Context使用 getApplicationgContext()

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mWebView = new WebView(getApplicationContext());
            mWebView.setLayoutParams(params);
            mLayout.addView(mWebView);
    

    3.4.2 在 Activity 销毁( WebView )的时候,先让 WebView 加载null内容,然后移除 WebView,再销毁 WebView,最后置空。

    @Override
        protected void onDestroy() {
            if (mWebView != null) {
                mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
                mWebView.clearHistory();
    
                ((ViewGroup) mWebView.getParent()).removeView(mWebView);
                mWebView.destroy();
                mWebView = null;
            }
            super.onDestroy();
        }
    

    4. 实例

    • 目标:实现显示“www.baidu.com”、获取其标题、提示加载开始 & 结束和获取加载进度
    • 具体实现:

    步骤1:添加访问网络权限

    这是前提!这是前提!这是前提!

    AndroidManifest.xml

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

    步骤2:主布局
    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.example.carson_ho.webview_demo.MainActivity">
    
    
       <!-- 获取网站的标题-->
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--开始加载提示-->
        <TextView
            android:id="@+id/text_beginLoading"
            android:layout_below="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--获取加载进度-->
        <TextView
            android:layout_below="@+id/text_beginLoading"
            android:id="@+id/text_Loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
    
        <!--结束加载提示-->
        <TextView
            android:layout_below="@+id/text_Loading"
            android:id="@+id/text_endLoading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
        
        <!--显示网页区域-->
        <WebView
            android:id="@+id/webView1"
            android:layout_below="@+id/text_endLoading"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="10dp" />
    </RelativeLayout>
    
    

    步骤3:根据需要实现的功能从而使用相应的子类及其方法(注释很清楚了)
    MainActivity.java

    package com.example.carson_ho.webview_demo;
    
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.KeyEvent;
    import android.view.ViewGroup;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.TextView;
    
    
    public class MainActivity extends AppCompatActivity {
        WebView mWebview;
        WebSettings mWebSettings;
        TextView beginLoading,endLoading,loading,mtitle;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            mWebview = (WebView) findViewById(R.id.webView1);
            beginLoading = (TextView) findViewById(R.id.text_beginLoading);
            endLoading = (TextView) findViewById(R.id.text_endLoading);
            loading = (TextView) findViewById(R.id.text_Loading);
            mtitle = (TextView) findViewById(R.id.title);
    
            mWebSettings = mWebview.getSettings();
    
            mWebview.loadUrl("http://www.baidu.com/");
    
            
            //设置不用系统浏览器打开,直接显示在当前Webview
            mWebview.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }
            });
    
            //设置WebChromeClient类
            mWebview.setWebChromeClient(new WebChromeClient() {
    
    
                //获取网站标题
                @Override
                public void onReceivedTitle(WebView view, String title) {
                    System.out.println("标题在这里");
                    mtitle.setText(title);
                }
    
    
                //获取加载进度
                @Override
                public void onProgressChanged(WebView view, int newProgress) {
                    if (newProgress < 100) {
                        String progress = newProgress + "%";
                        loading.setText(progress);
                    } else if (newProgress == 100) {
                        String progress = newProgress + "%";
                        loading.setText(progress);
                    }
                }
            });
    
    
            //设置WebViewClient类
            mWebview.setWebViewClient(new WebViewClient() {
                //设置加载前的函数
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    System.out.println("开始加载了");
                    beginLoading.setText("开始加载了");
    
                }
    
                //设置结束加载函数
                @Override
                public void onPageFinished(WebView view, String url) {
                    endLoading.setText("结束加载了");
    
                }
            });
        }
    
        //点击返回上一页面而不是退出浏览器
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) {
                mWebview.goBack();
                return true;
            }
    
            return super.onKeyDown(keyCode, event);
        }
    
        //销毁Webview
        @Override
        protected void onDestroy() {
            if (mWebview != null) {
                mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
                mWebview.clearHistory();
    
                ((ViewGroup) mWebview.getParent()).removeView(mWebview);
                mWebview.destroy();
                mWebview = null;
            }
            super.onDestroy();
        }
    }
    
    

    源代码:Carson_Ho的Github-WebviewDemo


    5. 总结


    请帮顶和评论点赞!因为你的鼓励是我写作的最大动力!


    欢迎关注carson_ho的微信公众号

    示意图

    示意图

    展开全文
  • WebView全面解析

    2018-08-24 01:01:00
    WebView全面解析 简介 WebView是android中一个非常重要的控件,它的作用是用来展示一个web页面。它使用的内核是webkit引擎,4.4版本之后,直接使用Chrome作为内置网页浏览器。 作用 显示和渲染网页; 可与...

    WebView全面解析

    简介

    WebView是android中一个非常重要的控件,它的作用是用来展示一个web页面。它使用的内核是webkit引擎,4.4版本之后,直接使用Chrome作为内置网页浏览器。

    作用

    1. 显示和渲染网页;
    2. 可与页面JavaScript交互,实现混合开发。

    使用介绍

    使用WebView之前,不要忘记在清单文件中声明访问网络权限:

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

    1、加载页面

    加载页面一般有以下几种形式:

        //方式一:加载一个网页
        webView.loadUrl("http://www.baidu.com");
    
        //方式二:加载应用资源文件内的网页
        webView.loadUrl("file:///android_asset/test.html");
    
        //方式三:加载一段代码
        webView.loadData(String data,String mimeType, String encoding);
    

    其中,方式一和方式二比较好理解,方式三可能有些朋友不明白,我在这里解释一下。

    WebView.loadData()WebView.loadDataWithBaseURL()是表示加载某一段代码,其中,WebView.loadDataWithBaseURL()兼容性更好,适用场景更多,因此,我着重介绍一下这个方法。

    WebView.loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl))的五个参数:baseUrl表示基础的网页,data表示要加载的内容,mimeType表示加载网页的类型,encoding表示编码格式,historyUrl表示可用历史记录,可以为值。
    举个例子:

    String body = "示例:这里有个img标签,地址是相对路径<img src='/uploads/allimg/130923/1FP02V7-0.png' />";
    webView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);
    

    加载后的网页:
    loadDataWithBaseURL

    加载有Header的网页:

    //加载有Header的网页:
    HashMap<String,String> header = new HashMap<>();
    ...
    webView.loadUrl(url,header);
    

    注意:
    如果你们直接用上面介绍的这三种方式来加载网页,很有可能会弹出系统浏览器进行网页访问,这样使用体验就会很差!
    解决办法是在loadUrl()之前加上这样一句代码:

    webView.setWebViewClient(new WebViewClient());
    

    这样就可以了,有的朋友可能会这样做,重写WebViewClientshouldOverrideUrlLoading()方法:

    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            webView.loadUrl(url);
            return true;
        }
    });
    

    这个也是可以的,但是会有一些问题,这个会在后面介绍。

    2、WebView的生命周期

    WebView的生命周期一般跟随Activity:

    @Override
    protected void onResume() {
        super.onResume();
        //恢复webview的状态(不靠谱)
        webView.resumeTimers();
        //激活webView的状态,能正常加载网页
        webView.onResume();
    }
    
    @Override
    protected void onPause() {
        super.onPause();
        //当页面被失去焦点被切换到后台不可见状态,需要执行onPause
        //通过onPause动作通知内核暂停所有的动作,比如DOM的解析、plugin的执行、JavaScript执行。
        webView.onPause();
    
        //当应用程序(存在webview)被切换到后台时,这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
        //它会暂停所有webview的layout,parsing,javascripttimer。降低CPU功耗。(不靠谱)
        webView.pauseTimers();
    }
    
    //在关闭了Activity时,如果Webview的音乐或视频,还在播放。就必须销毁Webview
    //但是注意:webview调用destory时,webview仍绑定在Activity上
    //这是由于自定义webview构建时传入了该Activity的context对象
    //因此需要先从父容器中移除webview,然后再销毁webview:
    ViewGroup parent = findViewById(R.id.container);
    parent.removeView(webView);
    webView.destroy();
    

    3、WebView的一些常用方法

    • 浏览器是否可以前进/后退

      //WebView是否可以后退
      boolean canGoBack = webView.canGoBack();
      //WebView后退
      webView.goBack();
      //WebView是否可以前进
      boolean canGoForward = webView.canGoForward();
      //WebView前进
      webView.goForward();
      //以当前的index为起始点前进或者后退到历史记录中指定的steps
      //如果steps为负数则为后退,正数则为前进
      boolean canGoBackOrForward = webView.canGoBackOrForward(step);
      

      注意,点击系统返回键时,是结束当前的Activity,而非调用WebView的goBack()方法。

    • 重新加载网页和停止加载

      webView.reload(); //刷新页面(当前页面的所有资源都会重新加载)
      webView.stopLoading(); //停止加载
      
    • 清除浏览器缓存

      //清除网页访问留下的缓存
      //由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
      Webview.clearCache(true);
      
      //清除当前webview访问的历史记录
      //只会webview访问历史记录里的所有记录除了当前访问记录
      Webview.clearHistory();
      
      //这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
      Webview.clearFormData();
      
    • 获取WebView高度、内容HTML高度和滚动距离

      //获取当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离。
      webView.getScrollY();
      //获取WebView控件的高度。
      webView.getHeight();webView.getBottom();
      //获取HTML的高度(原始高度,不包括缩放后的高度)
      webView.getContentHeight();
      
    • WebView下载文件

      /**
      * 当下载文件时打开系统自带的浏览器进行下载,当然也可以对捕获到的 url 进行处理在应用内下载。
      **/
      webView.setDownloadListener(new DownloadListener() {
          @Override
          public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
               Uri uri = Uri.parse(url);
               Intent intent = new Intent(Intent.ACTION_VIEW, uri);
               startActivity(intent);
          } 
      });
      

    4、WebView的常用工具类

    4.1 WebSettings:对WebView进行配置和管理。

        WebSettings webSettings = webView.getSettings();
        //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
        webSettings.setJavaScriptEnabled(true);
    
        //设置自适应屏幕,两者合用
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
    
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
    
        //缩放操作
        webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。
        webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
        webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
        webSettings.setTextZoom(2);//设置文本的缩放倍数,默认为 100
    
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);  //提高渲染的优先级
    
        webSettings.setStandardFontFamily("");//设置 WebView 的字体,默认字体为 "sans-serif"
        webSettings.setDefaultFontSize(20);//设置 WebView 字体的大小,默认大小为 16
        webSettings.setMinimumFontSize(12);//设置 WebView 支持的最小字体大小,默认为 8
    
        // 5.1以上默认禁止了https和http混用,以下方式是开启
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
    
        //其他操作
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
        webSettings.setGeolocationEnabled(true);//允许网页执行定位操作
        webSettings.setUserAgentString("Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0");//设置User-Agent
    
    
        //不允许访问本地文件(不影响assets和resources资源的加载)
        webSettings.setAllowFileAccess(false);
        webSettings.setAllowFileAccessFromFileURLs(false);
        webSettings.setAllowUniversalAccessFromFileURLs(false);
    

    其中,WebView设置缓存,当加载 html 页面时,WebView会在/data/data/package/下生成 databasecache 两个文件夹
    请求的URL记录保存在WebViewCache.db,而URL的内容是保存在WebViewCache文件夹下:

        //缓存模式如下:
        //LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
        //LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
        //LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
        //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
    
        //优先使用缓存:
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //不使用缓存:
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE)
    

    还有如下几种:

     //开启 DOM storage API 功能 较大存储空间,使用简单
     settings.setDomStorageEnabled(true);
     //设置数据库缓存路径 存储管理复杂数据 方便对数据进行增加、删除、修改、查询 不推荐使用
     settings.setDatabaseEnabled(true);
     final String dbPath = context.getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
     settings.setDatabasePath(dbPath);
     //开启 Application Caches 功能 方便构建离线APP 不推荐使用
     settings.setAppCacheEnabled(true);
     final String cachePath = context.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
     settings.setAppCachePath(cachePath);
     settings.setAppCacheMaxSize(5 * 1024 * 1024);
    

    WebView缓存

    4.2 WebViewClient:处理各种通知和请求事件。

    WebViewClient类常用方法:

    • shouldOverrideUrlLoading():拦截URL请求,重定向(有2个方法,一个是兼容5.0以下,一个是兼容5.0以上,保险起见两个都重写)。
      无论返回true还是false,只要为WebView设置了WebViewClient,系统就不会再将url交给第三方的浏览器去处理了。q其中返回false,代表将url交给当前WebView加载,也就是正常的加载状态;shouldOverrideUrlLoading()返回true,代表开发者已经对url进行了处理,WebView就不会再对这个url进行加载了。
      另外,使用post的方式加载页面,此方法不会被调用。

      webView.setWebViewClient(new WebViewClient(){
      
          //重定向URL请求,返回true表示拦截此url,返回false表示不拦截此url。
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
              //作用1:重定向url
              if(url.startsWith("weixin://")){
                  url = url.replace("weixin://","http://");
                  webView.loadUrl(url);
              }
      
              //作用2:在本页面的WebView打开,防止外部浏览器打开此链接
              view.loadUrl(url);
              return true;
          }
      });
      
    • onPageStarted()onPageFinished():页面加载时和页面加载完毕时调用。

    • shouldOverrideKeyEvent():重写此方法才能处理浏览器中的按键事件。

    • shouldInterceptRequest():页面每一次请求资源之前都会调用这个方法(非UI线程调用)。

    • onLoadResource():页面加载资源时调用,每加载一个资源(比如图片)就调用一次。

    • onReceivedError():加载页面的服务器出现错误(比如404)时回调。

    • onReceivedSslError():重写此方法可以让webview处理https请求。

    • doUpdateVisitedHistory():更新历史记录。

    • onFormResubmission():应用程序重新请求网页数据。

    • onReceivedHttpAuthRequest():获取返回信息授权请求。

    • onScaleChanged():WebView发生缩放改变时调用。

    • onUnhandledKeyEvent():Key事件未被加载时调用。

    补充,关键方法调用流程:
    情况一:loadUrl()无重定向时

    onPageStarted->onPageFinished
    

    情况二:loadUrl()网页A重定向到B时

    onPageStarted->shouldOverrideUrlLoading->onPageStarted->onPageFinished->onPageFinished
    

    情况三:在已加载的页面中点击链接,加载页面A(无重定向)

    shouldOverrideUrlLoading->onPageStarted->onPageFinished
    

    情况四:在已加载的页面中点击链接,加载页面A(页面A重定向至页面B)

    shouldOverrideUrlLoading->onPageStarted->shouldOverrideUrlLoading->onPageStarted->onPageFinished->onPageFinished
    

    情况五:执行goBack/goForward/reload方法

    onPageStarted->onPageFinished
    

    情况六:发生资源加载

    shouldInterceptRequest->onLoadResource
    

    4.3 WebChromeClient:辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等。

    WebChromeClient类常用方法:

    • onProgressChanged():获得网页的加载进度并显示。

    • onReceivedTitle():获得网页的标题时回调。

    • onReceivedIcon():获得网页的图标时回调。

    • onCreateWindow():打开新窗口时回调。

    • onCloseWindow():关闭窗口时回调。

    • onJsAlert():网页弹出提示框时触发此方法。

      @Override
      public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
          Toast.makeText(MainActivity.this,"Im alert",Toast.LENGTH_SHORT).show();
      
          //部分机型只会弹出一次提示框,调用此方法即可解决此问题。
          result.cancel();
          //返回true表示不弹出系统的提示框,返回false表示弹出
          return true;
      }
      
    • onJsConfirm():网页弹出确认框时触发此方法。

      @Override
      public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
      
          //confirm表示确认,cancel表示取消。
          result.confirm();
          //返回true表示不弹出系统的提示框,返回false表示弹出
          return true;
      }
      
    • onJsPrompt():网页弹出输入框时触发此方法。

      @Override
      public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
          //confirm表示确认(并返回值),cancel表示取消。
          result.confirm("8848");
          //返回true表示不弹出系统的提示框,返回false表示弹出
          return true;
      }
      

    WebView可以在需要的时候自动同步cookie,只需要获得CookieManager的对象将cookie设置进去就可以了。

    从服务器的返回头中取出 cookie 根据Http请求的客户端不同,获取 cookie 的方式也不同,请自行获取。

    4.4.1 设置cookie,若两次设置相同,则覆盖上一次的
    /**
     * 将cookie设置到 WebView
     * @param url 要加载的 url
     * @param cookie 要同步的 cookie
     */
    public static void syncCookie(String url,String cookie) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            CookieSyncManager.createInstance(context);
        }
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setCookie(url, cookie);//如果没有特殊需求,这里只需要将session id以"key=value"形式作为cookie即可
    }
    

    注意:
    1. 同步 cookie 要在 WebView 加载 url 之前,否则 WebView 无法获得相应的 cookie,也就无法通过验证。
    cookie应该被及时更新,否则很可能导致WebView拿的是旧的session id和服务器进行通信。
    2. cookie应该被及时更新,否则很可能导致WebView拿的是旧的session id和服务器进行通信。
    3. CookieManager会将这个Cookie存入该应用程序data/data/package_name/app_WebView/Cookies.db

    4.4.2 获取cookie
    /**
     * 获取指定 url 的cookie
     */
    public static String syncCookie(String url) {
        CookieManager cookieManager = CookieManager.getInstance();
        return cookieManager.getCookie(url);
    }
    
    4.4.3 清除cookie
    // 这个两个在 API level 21 被抛弃
    CookieManager.getInstance().removeSessionCookie();
    CookieManager.getInstance().removeAllCookie();
    
    // 推荐使用这两个, level 21 新加的
    CookieManager.getInstance().removeSessionCookies();// 移除所有过期 cookie
    CookieManager.getInstance().removeAllCookies(); // 移除所有的 cookie
    
    //设置清除cookie后的回调方法
    private void removeCookie(Context context) {
        CookieManager.getInstance().removeAllCookies(new ValueCallback<Boolean>() {
            @Override
            public void onReceiveValue(Boolean value) {
                // 清除结果
            }
        });
    }
    

    5、其他使用场景介绍

    5.1 长按保存图片或者拨打电话

    一般浏览器都有长按保存图片或者拨打图片的功能,实现这个功能和WebView.HitTestResult这个类有关,这个类会将你触摸网页的地方的类型和其他信息反馈给你。
    WebView.HitTestResult的常用方法:

    • HitTestResult.getType():获取所选中目标的类型,可以是图片,超链接,邮件,电话等等。
    • HitTestResult.getExtra():获取额外的信息。

    类型和意义:

    WebView.HitTestResult.UNKNOWN_TYPE //未知类型
    
    WebView.HitTestResult.PHONE_TYPE //电话类型
    
    WebView.HitTestResult.EMAIL_TYPE //电子邮件类型
    
    WebView.HitTestResult.GEO_TYPE //地图类型
    
    WebView.HitTestResult.SRC_ANCHOR_TYPE //超链接类型
    
    WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE //带有链接的图片类型
    
    WebView.HitTestResult.IMAGE_TYPE //单纯的图片类型
    
    WebView.HitTestResult.EDIT_TEXT_TYPE //选中的文字类型
    

    步骤:
    1、给WebView设置长按监听事件;
    2、获取WebView长按时的WebView.HitTestResult的事件类型,如果是图片,则做处理。

    代码:

    webView.setOnLongClickListener(new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View view) {
            WebView.HitTestResult result = ((WebView) view).getHitTestResult();
            if(result != null){
                switch (result.getType()){
                    case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE:
                        String imgUrl = result.getExtra();
                        ...
                        return true;
                    ...
                }
            }
            return false;
        }
    });
    

    Android与JavaScript交互

    Android与JavaScript的交互依赖于WebView,具体交互方式可以查看我的另一篇文章:WebView与JavaScript的交互总结

    WebView中常见问题

    1、Android5.0 WebView中Http和Https混合问题

    1.1 在Android 5.0上 Webview 默认不允许加载 Http 与 Https 混合内容,解决办法:

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
         webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }
    

    参数说明:

    • MIXED_CONTENT_ALWAYS_ALLOW:允许从任何来源加载内容,即使起源是不安全的;
    • MIXED_CONTENT_NEVER_ALLOW:不允许Https加载Http的内容,即不允许从安全的起源去加载一个不安全的资源;
    • MIXED_CONTENT_COMPATIBILITY_MODE:当涉及到混合式内容时,WebView 会尝试去兼容最新Web浏览器的风格。

    1.2 设置WebView接受所有网站的证书

    webView.setWebViewClient(new WebViewClient() {
                @Override
                public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                    // handler.cancel();// Android默认的处理方式
                    handler.proceed();// 接受所有网站的证书
                    // handleMessage(Message msg);// 进行其他处理
                }
    });
    

    注意:一定要移除super.onReceivedSslError(view, handler, error)方法,否则不生效。

    2、避免WebView引起的内存泄漏

    2.1 WebView所在的Activity新启一个进程

    <activity
        android:name=".ui.activity.Html5Activity"
        android:process=":lyl.boon.process.web">
        <intent-filter>
            <action android:name="com.lyl.boon.ui.activity.htmlactivity"/>
            <category android:name="android.intent.category.DEFAULT"/>
        </intent-filter>
    </activity>
    

    结束的时候直接System.exit(0)退出当前进程。

    2.2 动态创建WebView

    在代码中创建WebView,而不是在XML中创建:

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mWebView = new WebView(getApplicationContext());
            mWebView.setLayoutParams(params);
            mLayout.addView(mWebView);
    

    2.3 Activity销毁的时候先移除WebView

    @Override
    protected void onDestroy() {
        if (mWebView != null) {
            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }
    

    3、混淆导致JavaScript不可用

    proguard-rules.pro文件中配置:

    -keepattributes *Annotation*  
    -keepattributes *JavascriptInterface*
    -keep public class org.mq.study.webview.DemoJavaScriptInterface{
        public <methods>;
    }
    

    如果是内部类:

    -keepattributes *Annotation*  
    -keepattributes *JavascriptInterface*
    -keep public class org.mq.study.webview.webview.DemoJavaScriptInterface$InnerClass{
        public <methods>;
    }
    

    4、监听WebView网页加载完毕

    WebViewClientonPageFinished()方法不能保证一定是在网页加载完毕后调用,也有可能是一些其他情况下也会调用,因此,最好用WebChromeClientonProgressChanged()方法来监听:

    webView.setWebChromeClient(new WebChromeClient() {
    
        @Override
        public void onProgressChanged(WebView view, int position) {
            progressBar.setProgress(position);
            if (position == 100) {
                progressBar.setVisibility(View.GONE);
            }
            super.onProgressChanged(view, position);
        }
    });
    

    5、 HTML5 video 在 WebView 全屏显示

    当网页全屏播放视频时会调用WebChromeClient.onShowCustomView()方法,所以可以通过将 video 播放的视图全屏达到目的。

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        if (view instanceof FrameLayout && fullScreenView != null) {
            // A video wants to be shown
            this.videoViewContainer = (FrameLayout) view;
            this.videoViewCallback = callback;
            fullScreenView.addView(videoViewContainer, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            fullScreenView.setVisibility(View.VISIBLE);
            isVideoFullscreen = true;
        }
    }
    
    @Override
    public void onHideCustomView() {
        if (isVideoFullscreen && fullScreenView != null) {
            // Hide the video view, remove it, and show the non-video view
            fullScreenView.setVisibility(View.INVISIBLE);
            fullScreenView.removeView(videoViewContainer);
    
            // Call back (only in API level <19, because in API level 19+ with chromium webview it crashes)
            if (videoViewCallback != null && !videoViewCallback.getClass().getName().contains(".chromium.")) {
                videoViewCallback.onCustomViewHidden();
            }
    
            isVideoFullscreen = false;
            videoViewContainer = null;
            videoViewCallback = null;
        }
    }
    

    注意:很多的手机版本在网页视频播放时是不会调用这个方法的,所以这个方法局限性很大。

    6、loadData()加载中文数据出现乱码

    使用loadDataWithBaseURL()方法代替loadData()加载数据,不会出现乱码问题。 为loadData()的mimeType参数传入“text/html;charset=UTF-8”,也可以解决乱码问题。

    7、外部JavaScript攻击

    由于应用中的WebView没有对file:///类型的url做限制,可能导致外部攻击者利用Javascript代码读取本地隐私数据。

    7.1 如果WebView不需要使用file协议,直接禁用所有与file协议相关的功能即可(不影响对assets和resources资源的加载)。

    webSettings.setAllowFileAccess(false);
    webSettings.setAllowFileAccessFromFileURLs(false);
    webSettings.setAllowUniversalAccessFromFileURLs(false);
    

    7.2 如果WebView需要使用file协议,则应该禁用file协议的Javascript功能。具体方法为:在调用loadUrl方法前,以及在shouldOverrideUrlLoading方法中判断url的scheme是否为file。如果是file协议,就禁用Javascript,否则启用Javascript。

    //调用loadUrl前
    if("file".equals(Uri.parse(url).getScheme())){//判断是否为file协议
        webView.getSettings().setJavaScriptEnabled(false);
    }else{
        webView.getSettings().setJavaScriptEnabled(true);
    }
    webView.loadUrl(url);
    
    //WebViewClient中做的操作
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if("file".equals(request.getUrl().getScheme())){//判断是否为file协议
            view.getSettings().setJavaScriptEnabled(false);
        }else{
            view.getSettings().setJavaScriptEnabled(true);
        }
        return false;
    }
    

    8、WebView闪烁

    WebView关闭硬件加速功能即可。

    webView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
    

    9、缩放引起的应用崩溃

    setDisplayZoomControls(true)方法会允许显示系统缩放按钮,这个缩放按钮会在每次出现后的几秒内逐渐消失。但是在部分系统版本中,如果在缩放按钮消失前退出了Activity,就可能引起应用崩溃。

    解决办法:调用setDisplayZoomControls(false)方法不显示系统缩放按钮,反正使用手势捏合动作就可以实现网页的缩放功能了。如果确实需要使用缩放按钮,就需要在Activity的onDestroy()方法中隐藏WebView。

    10、webView控件padding不起作用

    在一个布局文件中有一个WebView,想使用padding属性让左右向内留出一些空白,但是padding属性不起左右,内容照样贴边显示,反而移动了右边滚动条的位置。android的bug,用一个外围的layout包含webview,可以有所改进,但不能完全解决。其实正确的做法是在webView的加载的css中增加padding,没必要为了padding而更改xml布局文件。

    一个很不错的WebViewActivity分享(来源于网络)

    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.os.Message;
    import android.support.v7.app.AppCompatActivity;
    import android.util.Log;
    import android.view.KeyEvent;
    import android.webkit.GeolocationPermissions;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    
    import com.lyl.test.R;
    
    public class Html5Activity extends AppCompatActivity {
    
        private String mUrl;
    
        private LinearLayout mLayout;
        private WebView mWebView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_web);
    
            Bundle bundle = getIntent().getBundleExtra("bundle");
            mUrl = bundle.getString("url");
    
            Log.d("Url:", mUrl);
    
            mLayout = (LinearLayout) findViewById(R.id.web_layout);
    
    
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mWebView = new WebView(getApplicationContext());
            mWebView.setLayoutParams(params);
            mLayout.addView(mWebView);
    
            WebSettings mWebSettings = mWebView.getSettings();
            mWebSettings.setSupportZoom(true);
            mWebSettings.setLoadWithOverviewMode(true);
            mWebSettings.setUseWideViewPort(true);
            mWebSettings.setDefaultTextEncodingName("utf-8");
            mWebSettings.setLoadsImagesAutomatically(true);
    
            //调用JS方法.安卓版本大于17,加上注解 @JavascriptInterface
            mWebSettings.setJavaScriptEnabled(true);
    
            saveData(mWebSettings);
    
            newWin(mWebSettings);
    
            mWebView.setWebChromeClient(webChromeClient);
            mWebView.setWebViewClient(webViewClient);
            mWebView.loadUrl(mUrl);
        }
    
        @Override
        public void onPause() {
            super.onPause();
            webView.onPause();
            webView.pauseTimers(); //小心这个!!!暂停整个 WebView 所有布局、解析、JS。
        }
    
        @Override
        public void onResume() {
            super.onResume();
            webView.onResume();
            webView.resumeTimers();
        }
    
        /**
         * 多窗口的问题
         */
        private void newWin(WebSettings mWebSettings) {
            //html中的_bank标签就是新建窗口打开,有时会打不开,需要加以下
            //然后 复写 WebChromeClient的onCreateWindow方法
            mWebSettings.setSupportMultipleWindows(false);
            mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        }
    
        /**
         * HTML5数据存储
         */
        private void saveData(WebSettings mWebSettings) {
            //有时候网页需要自己保存一些关键数据,Android WebView 需要自己设置
            mWebSettings.setDomStorageEnabled(true);
            mWebSettings.setDatabaseEnabled(true);
            mWebSettings.setAppCacheEnabled(true);
            String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
            mWebSettings.setAppCachePath(appCachePath);
        }
    
        WebViewClient webViewClient = new WebViewClient(){
    
            /**
             * 多页面在同一个WebView中打开,就是不新建activity或者调用系统浏览器打开
             */
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
    
        };
    
        WebChromeClient webChromeClient = new WebChromeClient() {
    
            //=========HTML5定位==========================================================
            //需要先加入权限
            //<uses-permission android:name="android.permission.INTERNET"/>
            //<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
            //<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) {
                super.onReceivedIcon(view, icon);
            }
    
            @Override
            public void onGeolocationPermissionsHidePrompt() {
                super.onGeolocationPermissionsHidePrompt();
            }
    
            @Override
            public void onGeolocationPermissionsShowPrompt(final String origin, final GeolocationPermissions.Callback callback) {
                callback.invoke(origin, true, false);//注意个函数,第二个参数就是是否同意定位权限,第三个是是否希望内核记住
                super.onGeolocationPermissionsShowPrompt(origin, callback);
            }
            //=========HTML5定位==========================================================
    
            //=========多窗口的问题==========================================================
            @Override
            public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
                WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
                transport.setWebView(view);
                resultMsg.sendToTarget();
                return true;
            }
            //=========多窗口的问题==========================================================
        };
    
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
                mWebView.goBack();
                return true;
            }
    
            return super.onKeyDown(keyCode, event);
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
    
            if (mWebView != null) {
                mWebView.clearHistory();
                ((ViewGroup) mWebView.getParent()).removeView(mWebView);
                mWebView.loadUrl("about:blank");
                mWebView.stopLoading();
                mWebView.setWebChromeClient(null);
                mWebView.setWebViewClient(null);
                mWebView.destroy();
                mWebView = null;
            }
        }
    
    }
    

    参考资料

    展开全文
  • WebView是手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装的一个组件。没有提供地址栏和导航栏,WebView只是单纯的展示一个网页界面。在开发中经常都会用到。 显示和渲染Web页面 直接使用html文件(网络...
  • iOS学习之WebView的使用

    2012-10-31 09:58:45
    1、使用UIWebView加载网页运行XCode 4.3,新建一个Single View ...2、加载WebView在ViewController.h添加WebView成员变量和在ViewController.m添加实现#import @interface ViewController : UIViewController { UIWe
  • 1.1 WebView概述  Android WebView在Android平台上是一个特殊的View,它能用来显示网页,这个WebView类可以被用来在app中仅仅显示一张在线的网页,当然还可以用来开发浏览器。 WebView内部实现是采用渲染引擎...
  • Android WebView基本使用

    2017-09-20 17:27:42
    WebView介绍Android WebView在Android平台上是一个特殊的View, 基于webkit引擎、展现web页面的控件,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来...
  • Android WebView常见问题及使用注意事项汇总 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是乎,一种混合型的app诞生了,灵活...
  • 目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存资源文件本地存储减少耗时操作客户端UI优化 可能有人会说了,为什么不做成native的呢...
  • 关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及实现。   Android API...
  • 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由 Android的WebView 实现的,但是 WebView 使用过程中存在许多漏洞,容易造成用户数据泄露等等危险,...
  • 前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商... 详细的 WebView攻略,含具体介绍、使用教程、与前端JS交互、缓存机制构建等等,希望您们会喜欢。 目录 1. 简介 一个基于web...
  • 我们都知道,在Android开发中,经常会用到Webview,而且WebView是出了名的坑的,各种bug。这时候腾讯老哥站出来了,搞了一个TBS浏览器服务这个东西。 说得这么屌,其实就是一个webView控件,然后解析解析网页的内核是...
  • 之前我在Android中使用WebView与JS交互全解析一文中,介绍了通过Webview和JS的交互方式,但Webview这个控件简直是让人又爱又恨,各种你想不到的错误在各种奇怪的手机上,各种不一样的版本里,所以我想通过这篇博客...
  • Android 各个版本WebView

    2014-11-06 15:27:04
    介绍Android 4.0及其以上版本的WebView内部结构实现以及WebView的渲染方式,WebKit for WebView VS Chromium for WebView。 各个Android Webview版本的变化。
  • 本来第三方平台(xxx流量公司)说的是直接用WebView加载这个H5界面就完事了,我心想这么简单,那不是分分钟的事,放着后面做(公司就我一个安卓,所以开发都是我说的算^_^,独立开发有的时候还是挺爽) 结
1 2 3 4 5 ... 20
收藏数 96,332
精华内容 38,532
关键字:

webview