精华内容
下载资源
问答
  • WebView

    千次阅读 2016-07-15 15:38:59
    一、、WebView: (一)、介绍:  Android提供了一个内置浏览器,该浏览器可以查看网站,查看邮件,播放视频。要使用该内置浏览器,要通过WebView组件实现。webView组件式专门用来浏览网页的。 类...
    一、、WebView:
    (一)、介绍:
            Android提供了一个内置浏览器,该浏览器可以查看网站,查看邮件,播放视频。要使用该内置浏览器,要通过WebView组件实现。webView组件式专门用来浏览网页的。
    类结构:
    java.lang.Object    ↳ android.view.View      ↳ android.view.ViewGroup        ↳ android.widget.AbsoluteLayout          ↳ android.webkit.WebView

    (二)、webview组件常用方法:【掌握】
    1. loadUrl()
    2. loadData()
    3. loadDataWithBaseURL()
    4. capturePicture()
    5. goBack()
    6. goForward()
    7. stopLoading()
    8. reload()
    (三)、WebView组件显示url页面的内容:
    1、基本代码:
    webView_main = (WebView) findViewById(R.id.webView_main);
    webView_main.loadUrl("http://www.qq.com");

    (四)、WebView组件加载html代码:
    1、基本代码:
    webView_main = (WebView) findViewById(R.id.webView_main);
    // webView_main.loadData(data, "text/html","utf-8");//这个方法中虽然设置了字符集,但是运行效果中发现依然中文会显示乱码。为了解决这个问题,建议使用loadDataWithBaseURL()方法。
    webView_main.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);

    2、如果加载的html代码中包含javascript语言,会如何呢?
    运行后发现,所有的javascript都不会执行。因为WebView 在默认情况下不支持javascript。如何让执行javascript呢?
    让WebView支持javascript的两个步骤:
    • 使用 WebView 组件的WebSettings对象的setJavaScriptEnabled()方法。这种做法是让 WebView 能支持绝大多数的javascript语言。但是依然不支持alert等警告对话框语句。
    • 使用 WebView 组件的setWebChromeClient()方法。这种做法是让 WebView 也支持显示alert等警告对话框。
    基本代码:
    webView_main.getSettings().setJavaScriptEnabled(true);// 支持运行javascript

    webView_main.setWebChromeClient(new WebChromeClient());// 支持运行特殊的javascript(例如:alert())

    webView_main.setWebViewClient(new WebViewClient());// 当点击超链地址后不会新打开浏览器来访问,而是始终在本app中浏览页面
    3、如果html中包含有超级链接地址,WebView能顺利执行吗?
     经过运行后发现,WebView中的超链地址在点击后,会跳出该应用程序,而弹出新的浏览器去访问该网页。
    如果解决呢?调用webview对象的setWebViewClient()方法即可解决。
    webView_main.setWebViewClient(new WebViewClient());
    【注意:】
    WebView除了可以加载服务器端的网页,还可以加载本地资产目录中的网页文件。网页文件格式为:"file:///android_asset/文件名称"。 
    例如:
    // 加载本地资产目录下的网页文件
    webView_main.loadUrl("file:///android_asset/网页文件名称.html")。

    二、WebKit

    (一)、WebKit概述
            WebKit是一个开源的浏览器网页排版引擎。Android浏览器的内核就是WebKit引擎,而苹果浏览器Safari也采用WebKit引擎。与之相对应的引擎有Gecko(Mozila、Firefox使用),Trident(也称MSHTML,IE使用)。WebKit是一个非常强大的Web应用平台,而Google对WebKit进行了封装,为开发者提供了丰富的Java接口,其中最重要的便是android.webkit.WebView控件。

    (二)、WebSettings常用方法
            通过以上代码,可以实现WebView加载网页内容,但是对于HTML文本的Javascript代码却无法加载运行。为了解决这个问题要借助WebSettings类。WebSettings类除了可以设置是否支持Javascript外,还具有set系列方法来设置WebView的属性和状态。WebSettings对象通过WebView对象的getSettings()方法来获取。

    表2  WebSettings常用方法

    方法

    描述

    setJavaScriptEnabled(boolean flag)

    设置是否支持Javascript

    setBlockNetworkImage(boolean flag)

    设置是否阻止网络图片加载

    setBuiltInZoomControls(boolean enabled)

    将HTML文本内容加载到WebView中

    setCacheMode(int mode)

    设置缓存模式

    setDefaultFontSize(int size)

    设置默认字体大小

    setFixedFontFamily(String font)

    设置固定使用的字体

    setDefaultTextEncodingName(String encoding)

    设置解码时默认的字符集

    setSupportZoom(boolean support)

    设置是否支持变焦

    setAllowFileAccess(boolean allow)

    设置是否允许访问WebView中文件。就是file:///android_asset和file:///android_res路径下的资产和资源文件。默认允许访问。



    (三)、WebChromeClient常用方法
            至此对于网页中一般的Javascript都可以被WebView加载执行了。但是某些特殊的Javascript语句依然无法执行。例如Javascript语句中的Alert、Confirm、Prompt等对话框。为了解决这个问题,要借助WebChromeClient类。WebChromeClient类专门用来辅助WebView处理Javascript的对话框、网站图标、网站Title、加载进度等。

    表3  WebChromeClient常用方法

    方法

    描述

    onJsAlert()

    处理Javascript中Alert对话框

    onJsConfirm()

    处理Javascript中Confirm对话框

    onJsPrompt()

    处理Javascript中Prompt对话框

    onProgressChanged()

    加载进度条改变

    onCloseWindow()

    关闭WebView

    onCreateWindow()

    创建WebView

    onReceivedIcon()

    Icon图标改变

    onReceivedTitle()

    网页Title改变

    onRequestFocus()

    WebView显示焦点


    (四)、WebViewClient常用方法
            WebView解决了支持Javascript的问题。但是新的问题又出来了。当点击WebView中的超链接后,原本希望目标网页在当前WebView中显示,但是却打开了系统浏览器来加载目标网页。为了解决这个问题,要借助WebViewClient类。WebViewClient类专门用来辅助WebView处理各种通知、请求等事件。通过WebView对象调用setWebViewClient()方法来指定一个WebViewClient对象,重写WebViewClient对象中的shouldOverrideUrlLoading()方法,使得当有新连接时,使用当前WebView来显示网页。WebViewClient除此之外,还有其他的方法。

    表4  WebViewClient常用方法

    方法

    描述

    shouldOverrideUrlLoading()

    新的链接在当前WebView中打开

    onPageStarted()

    网页开始加载

    onPageFinished()

    网页加载完毕

    doUpdateVisitedHistory()

    更新访问历史记录的数据库

    onLoadResource()

    加载指定Url地址提供的资源

    onFormResubmission()

    应用程序重新请求网页数据

    onScaleChanged()

    WebView发生改变


    (五)、WebView与JavaScript
            WebView不但可以运行HTML代码中Javascript语句,还可以同Javascript互相调用。学会本节内容,甚至可以用HTML和Javascript来编写Android应用。要实现WebView与Javascript互相调用,需要通过addJavascriptInterface()方法。

    public void addJavascriptInterface(Object obj, String interfaceName)
            该方法将一个Java对象绑定到一个Javascript对象中,Javascript对象名就是参数interfaceName,作用域是Global,这样便扩展了Javascript的API,可以通过Javascript获取到Android中的数据。

    assets/LoginInfo.html代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

     <head>

      <title> 模拟登录页面 </title>

      <meta http-equiv="content-type" content="text/html;charset=utf-8" />

     </head>


     <body>

     <script type="text/javascript">

     <!--

    window.οnlοad=function() {

    var loginInfo = window.LoginInfo.getLoginInfos();

    if (loginInfo){

    document.getElementById("username").value = loginInfo.getUsername();

    document.getElementById("pwd").value = loginInfo.getPassword();

    }

    }

     //-->

     </script>

      <form method="post" action="">

    用户名:<input type="text" name="username" id="username"><br>

    密码:<input type="text" name="pwd" id="pwd"><br>

    <input type="submit" value="登录">

      </form>

     </body>

    </html>

    MainActivity.java核心代码:

    1.public class MainActivity extends Activity {

    2. private WebView webView_main;

    3. private WebSettings webSettings = null;


    4. @Override

    5. protected void onCreate(Bundle savedInstanceState) {

    6. super.onCreate(savedInstanceState);

    7. setContentView(R.layout.activity_main);


    8. // 创建WebView对象

    9. webView_main = (WebView) findViewById(R.id.webView_main);

    10. // 获取WebSettings对象

    11. webSettings = webView_main.getSettings();

    12. // 设置WebView支持运行普通的Javascript

    13. webSettings.setJavaScriptEnabled(true);

    14. // 设置WebViewClient,保证新的链接地址不打开系统的浏览器窗口

    15. webView_main.setWebViewClient(new WebViewClient());

    16. // 设置WebChromeClient,以支持运行特殊的Javascript

    17. webView_main.setWebChromeClient(new WebChromeClient());

    18. // 将一个Java对象绑定到一个Javascript对象中。

    19. webView_main.addJavascriptInterface(this, "LoginInfo");

    20. // 加载写有Javascript语句的资产目录下网页

    21. webView_main.loadUrl("file:///android_asset/LoginInfo.html");

    22. }


    23. public LoginInfo getLoginInfos() {

    24. return new LoginInfo();

    25. }


    26. // Javascript语句中将调用该类中的内容

    27. class LoginInfo {

    28. private String username;

    29. private String password;


    30. public LoginInfo() {

    31. this.username = "Wangxiangjun";

    32. this.password = "123456789";

    33. }


    34. public String getUsername() {

    35. return username;

    36. }


    37. public void setUsername(String username) {

    38. this.username = username;

    39. }


    40. public String getPassword() {

    41. return password;

    42. }


    43. public void setPassword(String password) {

    44. this.password = password;

    45. }

    46. }

    47.}


    图 Javascript调用Android数据效果图


    【注意:】
    Java代码中也可以直接调用Javascript方法。代码如下:
    webView_main.loadUrl("javascript:方法名()");


    (六)、用WebView实现“网页版天气预告”
    webView_main = (WebView) findViewById(R.id.webView_main);
    webView_main.getSettings().setJavaScriptEnabled(true);
    webView_main.setWebChromeClient(new WebChromeClient());
    webView_main.setWebViewClient(new WebViewClient());
    webView_main.loadUrl("http://m.weather.com.cn/m/pn12/weather.htm?id=101010100T");

    (七)、制作简单的网页浏览器:
    1、核心代码:

    publicclass MainActivity extends Activity {

    privateEditText editText_main_url;

    privateWebView webView_main;

    private String url = "";


    @Override

    protectedvoid onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    editText_main_url = (EditText) findViewById(R.id.editText_main_url);

    webView_main = (WebView) findViewById(R.id.webView_main);

    // 让webview对象支持解析javascript语句

    webView_main.getSettings().setJavaScriptEnabled(true);

    // 让webview对象支持解析alert()等特殊的javascript语句

    webView_main.setWebChromeClient(new WebChromeClient());

    // 如果不使用该句代码,在点击超链地址后,会跳出程序,而弹出浏览器访问网页。

    webView_main.setWebViewClient(new WebViewClient());


    }


    publicvoid clickButton(View view) {

    switch (view.getId()) {

    // 浏览器中后退键监听

    caseR.id.button_main_goback:

    webView_main.goBack();

    break;

    // 浏览器前进键监听

    caseR.id.button_main_goforward:

    webView_main.goForward();

    break;

    // 当输入网址后,点击该按钮,可以执行访问

    caseR.id.button_main_submit:

    url = editText_main_url.getText().toString();

    if ((url == null) || url.equals("")) {

    Toast.makeText(MainActivity.this, "请输入url地址!", Toast.LENGTH_LONG).show();

    } else {

    if (url.indexOf("http://") != 0) {

    url = "http://" + url;

    }

    webView_main.loadUrl(url);

    }

    break;

    // 浏览器停止加载键监听

    caseR.id.button_main_stop:

    webView_main.stopLoading();

    break;

    // 浏览器刷新键监听

    default:

    break;

    }

    }

    }



    【备注:】MIME【了解】
    1. 概念:MIME意为多功能Internet邮件扩展,它设计的最初目的是为了在发送 电子邮件时附加多媒体数据,让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后,它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本,而变得丰富多彩。
    2. 每个MIME类型由两部分组成,前面是数据的大类别,例如声音audio、图象image等,后面定义具体的种类。
    3. 常见的MIME类型(通用型):
    • 超文本标记语言文本 .html text/html
    • xml文档 .xml text/xml
    • XHTML文档 .xhtml application/xhtml+xml
    • 普通文本 .txt text/plain
    • RTF文本 .rtf application/rtf
    • PDF文档 .pdf application/pdf
    • Microsoft Word文件 .word application/msword
    • PNG图像 .png image/png
    • GIF图形 .gif image/gif
    • JPEG图形 .jpeg,.jpg image/jpeg
    • au声音文件 .au audio/basic
    • MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
    • RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
    • MPEG文件 .mpg,.mpeg video/mpeg
    • AVI文件 .avi video/x-msvideo
    • GZIP文件 .gz application/x-gzip
    • TAR文件 .tar application/x-tar
    • 任意的二进制数据 application/octet-stream



    展开全文
  • Android:最全面的 Webview 详解

    万次阅读 多人点赞 2016-09-28 19:58:14
    其实这是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的微信公众号

    示意图

    示意图

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

    万次阅读 多人点赞 2017-03-22 09:19:45
    上述功能是由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基本使用

    万次阅读 多人点赞 2017-09-11 04:51:31
    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

    展开全文
  • @Override protected void onResume() { super.onResume(); if (webView != null) { webView.onResume(); //恢复pauseTimers状态 webView.resumeTimers(); webView.reload();...
  • 控制网页在WebView内部加载 webView = (WebView) findViewById(R.id.webView); webView.loadUrl(URL); //WebView帮助WebView去处理一些页面控制和请求通知 webView.setWebViewClient(new WebViewClient() {
  • 相关文章:1、《WebView使用详解(一)——Native与JS相互调用(附JadX反编译)》2、《WebView使用详解(二)——WebViewClient与常用事件监听》3、《WebView使用详解(三)——WebChromeClient与LoadData补充》 ...
  • Android:你不知道的 WebView 使用漏洞

    万次阅读 多人点赞 2017-03-22 09:13:52
    现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由 Android的WebView 实现的,但是 WebView 使用过程中存在许多漏洞,容易造成用户数据泄露等等危险,...
  • Android webview数据获取 webview抓取

    千次阅读 2020-03-10 11:02:40
    总结下 Android下 webview的数据获取、抓取。 先说总结的情况 方法一:给webview setWebViewClient,然后重写shouldInterceptRequest,获取请求参数,自己发起请求,返回WebResourceResponse。 方法二:...
  • WebView无法获取焦点

    万次阅读 多人点赞 2017-04-20 13:58:18
    WebView无法获取焦点 Webview.setEnabled(false) WebView无法获取焦点,不弹软键盘
  • android Webview 打开https链接

    万次阅读 2019-06-11 20:24:08
    参考这篇 解决了 打开 https链接... 详细的Webview使用攻略 package com.mycompany.myapp2; import android.content.Context; import android.app.*; import android.os.*; import android.util.*; import andr...
  • WebView shouldOverrideUrlLoading功能

    万次阅读 2019-05-17 18:07:29
    WebView shouldOverrideUrlLoading 最近查了一下WebView WebView shouldOverrideUrlLoading接口的资料,发现网上有很多错误的解释。 这里以WebView(58)为基础,记录一下该接口的功能。 错误解释:阻止调用系统...
  • webView选择图片并上传

    千次下载 热门讨论 2013-08-19 16:19:46
    android 使用webView选择图片并上传,相关联的服务器代码地址:http://download.csdn.net/detail/vipa1888/5975311
  • WebView详解

    千次阅读 2016-10-25 20:35:57
    public void setWebView(String url){ ...WebView webView = view.getWebView(); mProgressBar = view.getProgressBar(); //设置webview属性 WebSettings settings = webView.getSettings(); settings.setJavaScri
  • 1、注入获取webView高度的js方法 webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // vi...
  • WebView-使用WebView依次访问Url列表

    千次阅读 2018-07-24 06:47:47
    11 使用WebView依次访问Url列表 有时候,我们需要使用WebView依次访问Url列表,来刷新网页; 11.1 WebView创建 webView = (WebView) findViewById(R.id.webview); 11.2 WebView设置参数 // 设置缓存 ...
  • 1、内容无法适屏填充webview  settings.setUseWideViewPort(true);//取消掉就可以了 2、无限下滑webview下面出现大片空白区域 webView.setWebViewClient(new WebViewClient() { @Override public void ...
  • 先看看效果图吧 实现比较简单,但是第一次用可能会遇到一些坑 首先得有Webview控件: 有人问我是不是需要写布局文件,不写行不行,现在我就告诉你们,... WebView mywebView = new WebView(this); mywebView....
  • WebView控件的坑 Android开发加载H5页面的WebView控件就是一个深坑的存在: 默认不允许执行JavaScript脚本 H5页面宽度不适配手机 H5的视频播放不能全屏 H5中上传文件标签无响应导致不会拉起系统拍照与选择相册...
  • Android webview 设置cookie 保持登录状态 http缓存和安卓webview设置缓存
  • WebView是Android里的组件,下面将全面介绍WebView的常用用法。 1.简介 WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了...
  • webview 重定向

    千次阅读 2016-11-21 13:46:06
    今天与大家分享的是webview的重定向问题! 需求:webview加载网络html,html中的点击事件要求在webview中跳转,且html中有重定向的连接‘ 刚开始接收到这个需求的时候觉得整个人都不太好,html中的点击事件为什么不是...
  • 创建WebView比较耗时,因此我们尽量复用WebView 【问题点】 WebView却是与Activity Context绑定,销毁复用的时候,需要释放Activity的Context,否则会内存泄露。 【方案】 Activity context包在...
  • Android WebView 的使用(超详细用法)

    万次阅读 多人点赞 2019-01-03 15:56:02
    1.1 WebView概述  Android WebView在Android平台上是一个特殊的View,它能用来显示网页,这个WebView类可以被用来在app中仅仅显示一张在线的网页,当然还可以用来开发浏览器。 WebView内部实现是采用渲染引擎...
  • WebView的使用

    千次阅读 2015-12-18 16:49:01
    WebView的使用带有进度条的WebView布局<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />加载页面private void loadUrl(WebView webView, ...
  • WebView完全解读

    千次阅读 2016-03-23 20:08:27
    概述WebView控件可以在自己的应用程序中显示本地或者Internet上的网页。WebView是一个使用WebKit引擎(4.4之后基于Chromium)的浏览器控件。因此可以将WebView当做一个完整的浏览器使用。WebView不仅支持HTML、CSS等...
  • WebView】Android WebView中的Cookie操作

    万次阅读 2015-09-30 17:58:13
    Android给WebView设置Cookie的方法。
  • > 安卓Webview网页秒开...webview是怎么加载网页的呢? webview初始化->DOM下载→DOM解析→CSS请求+下载→CSS解析→渲染→绘制→合成 几个大厂的思路,目的:网页秒开,策略: - 针对客户端 1.预创建(appl...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,765
精华内容 21,906
关键字:

webview