androidweb_androidwebview - CSDN
精华内容
参与话题
  • Android:最全面的 Webview 详解

    万次阅读 多人点赞 2019-04-21 08:10:43
    现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。 ...

    前言

    • 现在很多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的微信公众号

    示意图

    示意图

    展开全文
  • Android:你要的WebView与 JS 交互方式 都在这里了

    万次阅读 多人点赞 2019-04-21 08:08:15
    上述功能是由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

    万次阅读 多人点赞 2014-11-06 15:27:04
    介绍Android 4.0及其以上版本的WebView内部结构实现以及WebView的渲染方式,WebKit for WebView VS Chromium for WebView。 各个Android Webview版本的变化。

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com

    前言:

    根据Google公布的Android 各个系统版本市场占有率(Google Android dashboards), Android 4.0及其以上系统将近90%左右,发展趋势必将是未来市面上几乎是Android 4.0以上系统。本文主要关注Android 4.0及以上系统WebView的实现,从Android WebView实现的Framework层大致可以分为三段Android 4.0系列,Android 4.1---4.3系列,Android 4.4及其以上系列。

    WebView差异

         WebView是Android系统提供能显示网页的系统控件,它是一个特殊的View,同时它也是一个ViewGroup可以有很多其他子View。在Android 4.4以下(不包含4.4)系统WebView底层实现是采用WebKit(http://www.webkit.org/)内核,而在Android 4.4及其以上Google 采用了chromium(http://www.chromium.org/)作为系统WebView的底层内核支持。在这一变化中Android 提供的WebView相关API并没有发生大变化,在4.4上也兼容低版本的API并且引进了少部分API。这里简单介绍下基于Chromium 的Webview和基于Webkit webview的差异,基于Chromium Webview提供更广的HTML5,CSS3,Javascript支持,在目前最新Android 系统版本5.0上基于chromium 37,Webview提供绝大多数的HTML5特性支持。Webkit JavaScript引起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升JavaScript性能。另外Chromium 支持远程调试(Chrome DevTools)。

                                 WebKit for WebView VS Chromium for WebView性能比对(测试环境 小米2. CM Browser. Android 4.1.1 VS 4.4.3)

     Webkit for WebviewChromium for Webview备注
    HTML5278434http://html5test.com/
    远程调试不支持支持Android 4.4及以上支持
    内存占用相差20-30M左右
    WebAudio不支持支持Android 5.0及以上支持
    WebGL不支持支持Android 5.0及以上支持
    WebRTC不支持支持Android 5.0及以上支持

    Android 4.0 WebView结构


    Android WebView API层主要提供给我们应用程序的接口,为了兼容向下版本Android在高版本中也是对这一层的API进行支持,因此如果底层发生变化,这些API接口层也不会发生太大变化。Android 平台不仅提供应用层编程接口也提供native层编程。下面介绍上图中的三个部分:
    1)Android Framework:Android WebView是个特殊控件实现的支持需要Framework的代码主要在./frameworks/base/core/java/android/webkit目录下,在Android 4.0实现主要是在WebViewCore.java,BrowserFrame.java等文件。
    2) Android JNI:需要有Native代码支持,因此需要有JNI层实现,Android WebView 4.0的JNI层实现WebView相关代码在./external/webkit/Source/WebKit/android/jni/目录下,这一层起到承上启下的作用,链接Framework层以及WebKit层的桥梁,比如相关的一些实现在WebviewCore.cpp,WebCoreFrameBridge.cpp等。
    3) WebKit: WebKit内核,其核心主要是解析W3C标准以及渲染排版网页,他是一个跨平台的内核引擎,那么需要支持各个平台,需要我们的平台实现层,在Android 4.0系统这一部分相关代码主要在./external/webkit/Source/WebKit/android/WebCoreSupport/目录下,比如FrameLoaderClientAndroid.cpp,ChromeClientAndroid.cpp,这一层负责WebCore与系统平台的桥接,具体在不同平台会有不同的实现。实现网页的解析排版及渲染由WebCore来实现在Android 4.0源码当中代码位于./external/webkit/Source/WebCore/下,下面有WebCore实现的各个模块功能支持的相关代码,比如页面视图部分在page目录的chrome.cpp,比如加载页面需要的资源的loader中得FrameLoader.cpp等,这里不在继续深入详解,有兴趣的朋友可以下载Android 4.0源码阅读。

    Android 4.1--4.3 WebView结构

    Android 4.1--4.3版本WebView内核实现还是基于WebKit,但在WebView的Framework层发生了变化,引入了工厂模式,目地是为了将内核与上层API接口分离开来,分离的意义不仅仅是抽象接口,更重要的是将来能替换内核部分的实现。 在4.1--4.3这一系列版本native结构基本与4.0版本相同,下图呈现新的变化:


    Android 4.0--4.3 渲染

    尽管之前4.0,与4.1--4.3是在不同的结构系列,其两者之间的差异主要是集中的Framework上的变化,这种变化更多体现在Framework层结构上的变化,WebKit内核极其在Android上的表现机制并没有发生很大变化,他们的渲染机制是相同的。下面介绍Android 4.0--4.3的渲染机制:


    在Android 4.0上已经默认开启硬件加速,因此WebView的渲染默认是基于硬件渲染的,通过本人分析其在WebView被隐藏的那一帧是采用软件渲染,目的是减少硬件占用,让其他UI能及时的响应。在硬件渲染情况下WebView通过onDraw方法传递Canvas 并将其转行为HardwareCanvas ,并生成native的 DrawGLFunction指针,通知native做渲染。在软件模式下,WebView通过传递的Canvas 通知内核webkitDraw将内核的一帧生成picture传输到Canvas中,执行Canvas draw bitmap。

    Android 4.4 WebView结构

    在Android 4.4系统上 Google已经将系统默认的Webkit内核替换成自己的开源项目chromium,通过之前的版本分析,我们可以看到Android 对WebView的Framework 结构进行调整使其更抽象,更重要的目的还是集成自己的开源chromium。下面我们来看看WebView的结构发生了什么样的变化:


    目录:
    ./frameworks/base/core/java/android/webkit
    ./frameworks/webview/chromium/java/com/android/webview/chromium
    ./external/chromium_org/android_webview
    ./external/chromium_org/content
    为了将chromium项目集成到Android 中,chromium项目抽象出Android webview这一层,之前的接口抽离这时候已经变得很明显,Android Webview基于chromium content API这一层,第三方浏览器厂商也可以采用这种方式,目前所了解的厂商有Opera使用这种方式。Android 4.4WebView的渲染核心目前也没有发生太大变化,还是基于WebView的Canvas,将Chromium composit 结构绘制到WebView Canvas上。接入chromium内核,WebView浏览性能大幅度提升,但是和chrome for Android还是有些不同,主要体现在一下几点:
    1. chrome浏览器是多进程架构,Chromium for Android Webview 是单进程架构。
    2. chrome浏览器 内存占用比 Android WebView大的多。
    3. chrome支持更多的HTML5 feature。

    Android WebView展望:

    Chromium项目编译"android_webview_apk“ 目前实现是基于Android SurfaceView,其渲染性能高于Android WebView的Canvas,历史遗留问题以及Android 系统WebView的作用特点,这一块随着Chromium 和 Android项目的整合,相信值得大家期待将来的Android WebView 的渲染性能会再次大幅提升。

    本博客会持续更新Android WebView后续版本的变化,敬请关注 谢谢!


    Android 5.0 Lollipop WebView

    Lollipop版本中WebView的内核实现采用Chromium 37版本,这个版本带来更多的安全性和稳定性。这个版本解决Android 4.4版本网页当中请求访问打开本地文件选择器问题,引入新的回调接口,onShowFileChooser方法,需要此功能的可以在5.0上接上这个回调接口,并实现功能。另外这个版本提供安全许可给用户选择,当网页需要访问特殊资源时,会通知我们的应用程序,请求允许,回调接口为onPermissionRequest。之前我们也提到这个版本使得WebView默认支持WebAudio,WebGL,WebRTC等标准。
    另外Google Android 还将webview做为一个能动态更新的app,能不更新Android版本情况下,更新WebView内核。Android 5.0 Webview默认提供减少内存占用支持,并且智能选择需要绘制的HTML document部门来提供性能。 当然开发者可以在自己应用程序需要时关闭这个选项(enableSlowWholeDocumentDraw)。

    参考资料:

    https://source.android.com/ Android 4.0---5.0

    http://developer.android.com/reference/android/webkit/WebView.html


    展开全文
  • Android WebView基本使用

    万次阅读 多人点赞 2017-09-20 17:27:42
    WebView介绍Android WebView在Android平台上是一个特殊的View, 基于webkit引擎、展现web页面的控件,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来...

    转载请注明出处:

    http://blog.csdn.net/lowprofile_coding/article/details/77928614

    WebView介绍

    Android WebView在Android平台上是一个特殊的View, 基于webkit引擎、展现web页面的控件,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。

    现在很多APP都内置了Web网页,比如说很多电商平台,淘宝、京东、聚划算等等。WebView比较灵活,不需要升级客户端,只需要修改网页代码即可。一些经常变化的页面可以用WebView这种方式去加载网页。例如中秋节跟国庆节打开的页面不一样,如果是用WebView显示的话,只修改修改html页面就行,而不需要升级客户端。

    Webview功能强大,可以直接使用html文件(本地sdcard/assets目录),还可以直接加载url,使用JavaScript可以html跟原生APP互调。

    加载html四种方式

    webView.loadUrl("http://139.196.35.30:8080/OkHttpTest/apppackage/test.html");//加载url
    
    webView.loadUrl("file:///android_asset/test.html");//加载asset文件夹下html
    
    //方式3:加载手机sdcard上的html页面
    webView.loadUrl("content://com.ansen.webview/sdcard/test.html");
    
    //方式4 使用webview显示html代码
    webView.loadDataWithBaseURL(null,"<html><head><title> 欢迎您 </title></head>" +
            "<body><h2>使用webview显示 html代码</h2></body></html>", "text/html" , "utf-8", null);

    WebViewClient与WebChromeClient区别

    使用WebView基本都会使用这两个类,那他们有哪些区别呢?

    WebViewClient主要帮助WebView处理各种通知、请求事件的,有以下常用方法:
    - onPageFinished 页面请求完成
    - onPageStarted 页面开始加载
    - shouldOverrideUrlLoading 拦截url
    - onReceivedError 访问错误时回调,例如访问网页时报错404,在这个方法回调的时候可以加载错误页面。

    WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等,有以下常用方法。
    - onJsAlert webview不支持js的alert弹窗,需要自己监听然后通过dialog弹窗
    - onReceivedTitle 获取网页标题
    - onReceivedIcon 获取网页icon
    - onProgressChanged 加载进度回调

    简单使用

    因为需要加载网页url,所以需要在AndroidManifest.xml中添加访问网络权限。

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

    布局文件:activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    
        <ProgressBar
            android:id="@+id/progressbar"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="3dip"
            android:max="100"
            android:progress="0"
            android:visibility="gone"/>
    </FrameLayout>

    外层FrameLayout,里面有WebView跟ProgressBar,WebView的宽高匹配父类,ProgressBar横向进度条,高度3dip,按照FrameLayout布局规则,ProgressBar会覆盖在WebView之上,默认是隐藏不显示。

    MainActivity.java

    public class MainActivity extends AppCompatActivity {
        private WebView webView;
        private ProgressBar progressBar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            progressBar= (ProgressBar)findViewById(R.id.progressbar);//进度条
    
            webView = (WebView) findViewById(R.id.webview);
    //        webView.loadUrl("file:///android_asset/test.html");//加载asset文件夹下html
            webView.loadUrl("http://139.196.35.30:8080/OkHttpTest/apppackage/test.html");//加载url
    
            //使用webview显示html代码
    //        webView.loadDataWithBaseURL(null,"<html><head><title> 欢迎您 </title></head>" +
    //                "<body><h2>使用webview显示 html代码</h2></body></html>", "text/html" , "utf-8", null);
    
            webView.addJavascriptInterface(this,"android");//添加js监听 这样html就能调用客户端
            webView.setWebChromeClient(webChromeClient);
            webView.setWebViewClient(webViewClient);
    
            WebSettings webSettings=webView.getSettings();
            webSettings.setJavaScriptEnabled(true);//允许使用js
    
            /**
             * LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
             * LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
             * LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
             * LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
             */
            webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存,只从网络获取数据.
    
            //支持屏幕缩放
            webSettings.setSupportZoom(true);
            webSettings.setBuiltInZoomControls(true);
    
            //不显示webview缩放按钮
    //        webSettings.setDisplayZoomControls(false);
        }
    
        //WebViewClient主要帮助WebView处理各种通知、请求事件
        private WebViewClient webViewClient=new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {//页面加载完成
                progressBar.setVisibility(View.GONE);
            }
    
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {//页面开始加载
                progressBar.setVisibility(View.VISIBLE);
            }
    
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i("ansen","拦截url:"+url);
                if(url.equals("http://www.google.com/")){
                    Toast.makeText(MainActivity.this,"国内不能访问google,拦截该url",Toast.LENGTH_LONG).show();
                    return true;//表示我已经处理过了
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
    
        };
    
        //WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等
        private WebChromeClient webChromeClient=new WebChromeClient(){
            //不支持js的alert弹窗,需要自己监听然后通过dialog弹窗
            @Override
            public boolean onJsAlert(WebView webView, String url, String message, JsResult result) {
                AlertDialog.Builder localBuilder = new AlertDialog.Builder(webView.getContext());
                localBuilder.setMessage(message).setPositiveButton("确定",null);
                localBuilder.setCancelable(false);
                localBuilder.create().show();
    
                //注意:
                //必须要这一句代码:result.confirm()表示:
                //处理结果为确定状态同时唤醒WebCore线程
                //否则不能继续点击按钮
                result.confirm();
                return true;
            }
    
            //获取网页标题
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                Log.i("ansen","网页标题:"+title);
            }
    
            //加载进度回调
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setProgress(newProgress);
            }
        };
    
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            Log.i("ansen","是否有上一个页面:"+webView.canGoBack());
            if (webView.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK){//点击返回按钮的时候判断有没有上一页
                webView.goBack(); // goBack()表示返回webView的上一页面
                return true;
            }
            return super.onKeyDown(keyCode,event);
        }
    
        /**
         * JS调用android的方法
         * @param str
         * @return
         */
        @JavascriptInterface //仍然必不可少
        public void  getClient(String str){
            Log.i("ansen","html调用客户端:"+str);
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
    
            //释放资源
            webView.destroy();
            webView=null;
        }
    }
    • onCreate 查找控件,给webView设置加载url,添加js监听,监听的名称是”android”,设置webChromeClient跟webViewClient回调,通过getSettings方法获取WebSettings对象,设置允许加载js,设置缓存模式,支持缩放。
    • webViewClient 重写了几个方法,onPageFinished页面加载完成隐藏进度条,onPageStarted页面开始加载显示进度条,shouldOverrideUrlLoading拦截url,如果请求url是打开google,不让他请求,因为google在国内不能访问,就算请求也请求不到还不如拦截掉,直接告诉用户不能访问。
    • webChromeClient onJsAlert()因为WebView不支持alert弹窗,在这个方法中用AlertDialog去弹窗。onReceivedTitle获取网页标题。onProgressChanged页面加载进度,把加载进度给progressBar。
    • onKeyDown 如果点击系统自带返回键&&webView有上一级页面,调用goBack返回。否则不处理。什么时候辉有上一级页面呢?就是你从首页跳转到了一个新页面,点击返回的时候会返回首页。如果本来就在首页点击返回的时候会退出app。
    • getClient html页面的JS可以通过这个方法回调原生APP,这个方法有个注解@JavascriptInterface,这个是必须的,这个方法有个字符串参数,这个方法跟我们在onCreate中调用addJavascriptInterface传入的name一起使用的。例如html中想要回调这个方法可以这样写:javascript:android.getClient(“传一个字符串给客户端”);
    • onDestroy activity销毁时释放webView资源。

    运行代码,效果图如下:
    效果图

    源码下载

    如果你想第一时间看我的后期文章,扫码关注公众号,每周不定期推送Android开发实战教程文章…

          Android开发666 - 安卓开发技术分享
                 扫描二维码加关注
    

    Android开发666

    展开全文
  • android webView 内核对比

    千次阅读 2019-07-04 15:31:42
    Android的H5支持则是个比较头痛的事情 笔者在进行IOS开发时,WebView从来都不是问题,在IOS上不仅WebView统一,而且性能极佳,也很少需要考虑兼容性问题; 但这个问题在Android上则表现的非常不一样,由于机...
  • Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的JavaScript进行交互,Android也对交互做了很好的...
  • Android WebView 的使用(超详细用法)

    万次阅读 多人点赞 2019-01-03 16:03:47
    Android WebView在Android平台上是一个特殊的View,它能用来显示网页,这个WebView类可以被用来在app中仅仅显示一张在线的网页,当然还可以用来开发浏览器。 WebView内部实现是采用渲染引擎(WebKit)来展示view的...
  • web开发和android开发的区别

    千次阅读 2018-07-27 17:04:05
    1.android中java可以加载c/c++编写的so库文件,web中不可以;web中只能将c/c++翻译成wasm文件,然后进行调用。(分析:web中之所以不能加载so文件的原因应该是浏览器不能直接操作文件系统) 2.android是c/s架构,...
  • [020] Android模拟器访问本地Web应用

    万次阅读 2011-08-07 13:46:26
    本篇文章试图解决这样一个问题:如何在Android模拟器上访问本地的Web应用? 例如,在你的开发机器启动一个Tomcat,然后在打开电脑上的浏览器,默认情况下输入http://localhost:8080/就能够访问到Tomcat的主页面;...
  • 有两种方式, 一种是单窗口 另一种... FrameLayout flWeb = findViewById(R.id.fl_web); WebView web = new WebView(MainActivity.this);//新创建一个webview flWeb.addView(web); WebSettings webSettings = web...
  • Android Webview适配屏幕宽度

    万次阅读 2017-07-25 15:36:50
    网上有很多解决方案,但是,要么不适用(改h5),要么影响其他h5显示...web.getSettings().setJavaScriptEnabled(true); // 设置可以支持缩放 web.getSettings().setSupportZoom(true); // 设置出现缩放工具 web.ge
  • Android webView 支持缩放及自适应屏幕

    万次阅读 2016-05-03 10:31:18
    法师打发都是
  • 提示错误:Frameworks detected: Android framework is detected in the project Configure 解决方案: press CTRL+ALT+SHIFT+Son project setting structure->Facetsclick + button and add Android-...
  • Android Webview中如何打印web端的console日志呢? 1.调试Web应用程序 Debugging Web Apps 如果您使用运行Android 4.4或更高版本的设备测试您的网络应用,则可以WebView使用Chrome开发者工具远程调试您的网页,...
  • Android下最好用的开源HTTP 服务器

    千次阅读 2014-02-13 11:36:45
    Android下最好用的开源HTTP 服务器 Published by 荒野无灯 on 2012-08-01 00:00:00 under软件/酷软分享 ... 在试用过 Android Webserver (com.bolutions.webserver) ...kWS (Android Web Server) ( org.xeustechnolo
  • 小弟 不懂安卓,只知道安卓与Java语言有极高的相似度,在...这样的安卓和一个web前端有什么区别? 所有的数据都由后台完全编辑好,安卓只在json中获取数据就好。这难道就是安卓吗?有没有资深安卓大师帮小弟讲解讲解?
  • 以太坊 web3j for java 配置和使用 &lt;1&gt; 官网:here 环境: mac &amp; android studio 一、 导入包 在app/build.gradle中:compile 'org.web3j:core:3.0.1-android' 即: ...
  • 使用HBuilder打包web项目

    千次阅读 2018-07-28 00:16:56
    百度没找到一篇成功的打包流程 弄了两天 走了不少弯路 主要是没搞过安卓 多亏一个安卓开发的朋友帮忙才... Android SDK; jdk 其中第一个和第三个最好和我下的一样 否则不能保证成功 2.安装 jdk -&gt; Andr...
  • 最近在搞广告平台的一些东西,看了一下别的广告平台的jar包,基本上都会有一个Activity用来显示web网页,用到了一个用来显示网页的组件--WebView。但是其网页的加载进度就不受我们控制了,所以当网页数据很多时就...
  • Android中 WebView打开一个网页实例

    千次阅读 2016-11-15 10:04:30
    布局界面如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent
1 2 3 4 5 ... 20
收藏数 209,835
精华内容 83,934
热门标签
关键字:

androidweb