181.WebViewClient 和 WebChromeClient （WebVIew）

──────────────────────────────────────────── 【1. 概述】

Android 的 WebView 是一种非常常用的组件，用来在应用内展示网页内容。为了更精细地控制网页加载和表现，Android 提供了两个重要的辅助类：

1. WebViewClient
2. WebChromeClient

这两个类在实际使用中各有侧重：

• WebViewClient 主要用于处理页面加载过程中的事件，比如页面跳转、请求拦截、错误处理等。
• WebChromeClient 则主要处理网页中的 JavaScript 对话框、网站图标、页面标题、加载进度等增强型功能。

  通过正确配置这两个类，你不仅能改善用户在 WebView 中的体验，还能够与网页实现更紧密的交互。

  ──────────────────────────────────────────── 【2. WebViewClient 的概念与用法】

  2.1 什么是 WebViewClient？

  WebViewClient 类位于 android.webkit 包中，用于接管 WebView 中的大部分页面加载、跳转和错误处理等事件。默认情况下，当用户点击链接时，WebView 会调用系统浏览器打开网页。但如果设置了自定义的 WebViewClient，可以使所有链接在 WebView 内部打开，从而避免切换到外部浏览器。

  2.2 常用方法介绍

  在 WebViewClient 中常用的方法包括：

  • shouldOverrideUrlLoading(): 当页面请求导航时调用，可以决定是否在 WebView 中加载该 URL。
  • onPageStarted(): 页面开始加载时调用，适合做进度显示等前期处理操作。
  • onPageFinished(): 页面加载完成时调用，可隐藏加载进度条。
  • onReceivedError(): 在页面加载过程中遇到错误时调用，可用于错误提示和后续处理。
  • onReceivedSslError(): 用于捕捉 SSL 错误，通常需要处理安全连接问题。

    （SSL (Secure Sockets Layer) 是一种安全协议，用于在计算机网络上的两个应用程序之间提供加密通信。 更准确地说，现在通常指的是 TLS (Transport Layer Security)，它是 SSL 的继任者，但人们仍然习惯使用 SSL 这个术语。）

    2.3 使用场景

    通常你会在 Activity 或 Fragment 中创建 WebView 后，调用 webView.setWebViewClient(…) 来设置自定义 WebViewClient。例如，拦截所有链接在 WebView 中加载，或检测加载出错时显示一个错误页面。

    ──────────────────────────────────────────── 【3. WebChromeClient 的概念与用法】

    3.1 什么是 WebChromeClient？

    WebChromeClient 同样位于 android.webkit 包中，其主要职责是提供更丰富的浏览器特性和用户交互体验。与 WebViewClient 不同，WebChromeClient 更多关注与网页的交互、呈现（例如标题、进度条、图标）以及 JavaScript 的对话框处理（alert、confirm、prompt）。

    
    （图片来源网络，侵删）

    3.2 常用方法介绍

    WebChromeClient 的典型方法包括：

    
    （图片来源网络，侵删）
    • onProgressChanged(): 当网页加载进度改变时调用，可以用来更新 UI 上的进度条。
    • onReceivedTitle(): 网页获取到标题时调用，可以用于设置 Activity 标题。
    • onReceivedIcon(): 获取网页图标时调用。
    • onJsAlert(), onJsConfirm(), onJsPrompt(): 分别处理 JavaScript 的 alert、confirm、prompt 弹窗，使得这些弹窗在应用内以原生界面显示。
    • onShowCustomView(), onHideCustomView(): 适用于 HTML5 视频全屏播放的处理。

      3.3 使用场景

      如果你希望将网页加载进度显示在进度条上，或者希望在 Activity 上动态显示网页标题，就需要实现 WebChromeClient 中的相关方法。另外，对于交互式网站中的弹窗、全屏视频播放等场景，WebChromeClient 能够提供更多定制空间。

      
      （图片来源网络，侵删）

      ──────────────────────────────────────────── 【4. WebViewClient 与 WebChromeClient 的区别与协同】

      4.1 区别

      • WebViewClient 主要负责控制页面加载、链接处理、错误拦截等 WebView 的“后台”行为。
      • WebChromeClient 主要负责网页中呈现的“前台”效果，如进度、标题、图标、JS 交互、全屏视频等功能。

        4.2 协同工作

        在实际项目中，通常会同时设置 WebViewClient 和 WebChromeClient。WebViewClient 负责保证页面在 WebView 内部加载及处理异常；而 WebChromeClient 则负责提升页面的用户交互体验。正确地设置后，应用不仅能内嵌网页，还能对加载状态、JS 弹窗等进行有效控制，是创建优质内嵌浏览器的关键。

        ──────────────────────────────────────────── 【5. 配置 WebView 实例——Kotlin 示例】

        下面我们通过一个完整的 Android 应用示例来展示如何使用 WebViewClient 与 WebChromeClient。应用的目标是加载一个网页，并显示加载进度，同时处理链接点击和 JavaScript 弹窗。示例项目包含以下文件：

        • MainActivity.kt
        • activity_main.xml

          下面详细展示每个文件的完整代码及说明。

          ──────────────────────────────────────────── 文件：MainActivity.kt

          下面的 Kotlin 文件展示了如何在 Activity 中配置 WebView，并使用自定义的 WebViewClient 和 WebChromeClient。主要功能包括：

          1. 在 WebView 内加载URL，不跳转外部浏览器；
          2. 显示加载进度；
          3. 处理 JS 弹窗（例如 alert 弹窗）；
          4. 自定义错误加载等处理（如页面加载失败时显示错误提示）。

          Main.kt:

          package com.example.myapplication
          import android.annotation.SuppressLint
          import android.graphics.Bitmap
          import android.net.http.SslError
          import android.os.Bundle
          import android.util.Log
          import android.webkit.JsResult
          import android.webkit.SslErrorHandler
          import android.webkit.WebChromeClient
          import android.webkit.WebResourceError
          import android.webkit.WebResourceRequest
          import android.webkit.WebSettings
          import android.webkit.WebView
          import android.webkit.WebViewClient
          import android.widget.ProgressBar
          import androidx.appcompat.app.AlertDialog
          import androidx.appcompat.app.AppCompatActivity
          class MainActivity : AppCompatActivity() {
              private lateinit var webView: WebView
              private lateinit var progressBar: ProgressBar
              /*
              @SuppressLint("SetJavaScriptEnabled") 注解：
              @SuppressLint 是一个 Android Lint 工具提供的注解，用于抑制特定的 Lint 警告
                  Lint 是 Android Studio 中用于检查代码潜在问题的工具。
              "SetJavaScriptEnabled" 是一个 Lint 检查的 ID，表示与 WebView 的 setJavaScriptEnabled() 方法相关的警告。
              在 Android WebView 中，默认情况下 JavaScript 是禁用的
              为了在 WebView 中执行 JavaScript 代码，需要调用 setJavaScriptEnabled(true) 方法启用 JavaScript。
               */
              @SuppressLint("SetJavaScriptEnabled")
              override fun onCreate(savedInstanceState: Bundle?) {
                  super.onCreate(savedInstanceState)
                  setContentView(R.layout.activity_main)
                  // 获取 WebView 与 ProgressBar 实例
                  webView = findViewById(R.id.webView)
                  progressBar = findViewById(R.id.progressBar)
                  // 配置 WebView 设置
                  /*
                  WebSettings：
                  WebSettings 是 Android SDK 中的一个类，用于配置 WebView 的行为和特性
                  通过 WebSettings，你可以控制 WebView 的各种设置，例如：
                  是否启用 JavaScript,是否启用 DOM 存储,是否启用缓存,是否支持缩放,是否允许混合内容
                  用户代理 (User Agent),字体大小,等等。
                  DOM (Document Object Model)：
                  DOM (Document Object Model) 即文档对象模型，是 HTML、XML 或 SVG 文档的编程接口
                  它将文档表示为一个树形结构，树中的每个节点都代表文档中的一个元素、属性或文本。
                  webSettings.loadWithOverviewMode = true：
                  loadWithOverviewMode 是 WebSettings 类中的一个属性，用于设置 WebView 是否以概览模式加载页面。
                  当 loadWithOverviewMode 设置为 true 时
                  WebView 会尝试将整个页面缩放到适合屏幕的大小，以便用户可以一次性看到页面的全部内容。
                  这在加载设计用于较大屏幕的网页时非常有用，因为它可以避免用户需要手动缩放页面才能看到全部内容。
                  useWideViewPort 是 WebSettings 类中的一个属性，用于设置 WebView 是否使用宽视口模式。
                  当 useWideViewPort 设置为 true 时，WebView 会使用一个较宽的视口来渲染页面。
                  视口 (viewport) 指的是浏览器窗口中用于显示网页内容的区域。
                   */
                  val webSettings: WebSettings = webView.settings
                  webSettings.javaScriptEnabled = true  // 启用 JavaScript
                  webSettings.domStorageEnabled = true    // 启用 DOM 存储
                  webSettings.loadWithOverviewMode = true
                  webSettings.useWideViewPort = true
                  // 设置自定义 WebViewClient
                  /*
                  webViewClient 是 WebView 类的一个属性，用于设置一个 WebViewClient 对象
                  WebViewClient 是一个抽象类，用于处理 WebView 的各种事件，例如：页面开始加载
                  页面加载完成,URL 被点击,发生 SSL 错误,发生 HTTP 错误,等等。
                  webViewClient 的作用是允许开发者自定义 WebView 的行为，以满足不同的需求
                  通过设置 webViewClient，你可以拦截和处理 WebView 的各种事件
                  override fun onPageStarted 是 WebViewClient 类中的一个方法，用于在网页开始加载时接收通知
                  你可以重写该方法来执行一些需要在网页开始加载时进行的操作，例如显示加载进度条。
                   */
                  webView.webViewClient = object : WebViewClient() {
                      // 当页面开始加载时调用
                      override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                          progressBar.visibility = ProgressBar.VISIBLE
                          super.onPageStarted(view, url, favicon)
                      }
                      // 当页面加载完成时调用
                      override fun onPageFinished(view: WebView?, url: String?) {
                          progressBar.visibility = ProgressBar.GONE
                          super.onPageFinished(view, url)
                      }
                      // 拦截链接点击，使其在 WebView 内加载
                      override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                          // 返回 false 表示由 WebView 自行处理该链接
                          return false
                      }
                      // 处理 SSL 错误（例如证书错误）
                      override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {
                          // 这里可以选择忽略 SSL 错误，但建议根据实际情况进行提示或中断加载
                          handler?.proceed()   // 忽略错误，继续加载
                      }
                      // 错误处理，使用 WebResourceError 作为错误类型
                      override fun onReceivedError(
                          view: WebView?,
                          request: WebResourceRequest?,
                          error: WebResourceError?
                      ) {
                          // 处理加载错误，可以弹出对话框提醒用户
                          Log.e("WebViewError", "Error loading page: ${error?.description}")
                          super.onReceivedError(view, request, error)
                      }
                  }
                  // 设置自定义 WebChromeClient
                  /*
                  webChromeClient 是 WebView 类的一个属性，用于设置一个 WebChromeClient 对象。
                  WebChromeClient 是一个抽象类，用于处理与浏览器 UI 相关的事件和操作，例如：
                  网页加载进度变化,网页标题更新,JavaScript 对话框 (alert, confirm, prompt),网页图标 (favicon),全屏视频,等等。
                  webChromeClient 的作用是允许开发者自定义 WebView 的 UI 行为，以及处理与浏览器 UI 相关的事件
                  通过设置 webChromeClient，你可以拦截和处理 WebView 的各种 UI 事件
                   */
                  webView.webChromeClient = object : WebChromeClient() {
                      // 处理加载进度变化
                      override fun onProgressChanged(view: WebView?, newProgress: Int) {
                          progressBar.progress = newProgress
                          super.onProgressChanged(view, newProgress)
                      }
                      // 当网页的标题更新时回调
                      override fun onReceivedTitle(view: WebView?, title: String?) {
                          supportActionBar?.title = title
                          super.onReceivedTitle(view, title)
                      }
                      // 处理 JavaScript Alert 弹窗
                      override fun onJsAlert(view: WebView?, url: String?, message: String?, result: JsResult?): Boolean {
                          AlertDialog.Builder(this@MainActivity)
                              .setTitle("提示")
                              .setMessage(message)
                              .setPositiveButton(android.R.string.ok) { _, _ -> result?.confirm() }
                              .setCancelable(false)
                              .create()
                              .show()
                          return true  // 表示我们自定义处理了弹窗
                      }
                  }
                  // 开始加载网页
                  webView.loadUrl("https://www.example.com")
              }
              // 返回键处理，支持 WebView 返回上一页
              override fun onBackPressed() {
                  if (webView.canGoBack()) {
                      webView.goBack()
                  } else {
                      super.onBackPressed()
                  }
              }
          }

          main.xml:

          ──────────────────────────────────────────── 【6. 深入解析与注意事项】

          6.1 自定义 WebViewClient

          在上面的示例中，我们重写了 onPageStarted、onPageFinished、shouldOverrideUrlLoading 等方法。

          • onPageStarted 与 onPageFinished 用于控制进度条显示与隐藏，给用户反馈页面加载状态。
          • shouldOverrideUrlLoading 返回 false，表示所有页面导航都由当前 WebView 处理，不会调用系统浏览器。
          • onReceivedSslError 方法中调用 handler.proceed() 表示忽略 SSL 错误，但在正式项目中，建议妥善处理以确保安全。

            6.2 自定义 WebChromeClient

            定制 WebChromeClient 的主要目的是：

            • 在 onProgressChanged 中更新进度条百分比；
            • 使用 onReceivedTitle 动态设置 AppBar 或 ActionBar 标题；
            • 通过 onJsAlert 等方法自定义处理网页中出现的 JavaScript 对话框，避免默认对话框的不美观和体验问题。

              对于某些交互场景，你还可以利用 onShowCustomView/onHideCustomView 来实现全屏视频播放。

              6.3 WebSettings 配置

              我们在 MainActivity 中对 WebView 的设置进行了配置：

              • 启用了 JavaScript 支持，使得动态网页能够正常工作；
              • 开启 DOM 存储，改善页面性能；
              • 调用 loadWithOverviewMode 与 useWideViewPort 方法，使得网页能够适应不同设备屏幕。

                根据不同需求，你可以进一步定制 WebSettings，例如启用缓存、设置用户代理等。

                6.4 性能和安全性

                在使用 WebView 时需要考虑如下问题：

                • 性能：为提高页面加载速度，可以开启硬件加速，合理管理缓存。
                • 安全：由于 WebView 有可能加载第三方内容，应该慎重设置 JavaScript 接口并确保不暴露敏感接口；同时，在处理 SSL 错误时不要简单忽略错误，而应根据实际情况做出提示或中断加载。

                  6.5 兼容性注意

                  WebView 会受到 Android 版本的影响，不同版本的 WebView 可能存在差异。所以开发时要注意在不同设备和版本上进行充分测试。另外，如果需要支持较低版本的 Android，建议检查对应 API 的支持情况，并做好降级处理。

                  [面试问题]

                  ──────────────────────────── 【问题1】

                  请简单介绍一下什么是 WebViewClient，以及它在 Android WebView 中的主要作用是什么？

                  WebViewClient 是 Android 提供的一个辅助类，用于控制 WebView 在加载网页过程中的行为。它主要负责处理页面加载、导航、重定向、错误处理等后台流程。当用户点击页面上的链接时，默认情况下系统可能会调用外部浏览器打开链接。如果设置了自定义的 WebViewClient，可以让所有链接在当前 WebView 内部加载，这对于保持应用内体验非常重要。另外，WebViewClient 还提供了处理加载错误（例如网络错误或 SSL 错误）、处理页面开始和结束加载事件的接口，使得开发者能够灵活地更新 UI，如显示或隐藏加载进度指示。

                  ──────────────────────────── 【问题2】

                  那么，WebChromeClient 又是什么？它与 WebViewClient 有什么区别和联系？

                  WebChromeClient 是另一个用来扩展 WebView 功能的重要类，但其侧重点与 WebViewClient 不同。WebChromeClient 主要处理 WebView 中的客户端特性，如网页的标题、加载进度、JavaScript 对话框（比如 alert、confirm、prompt）、网站图标以及全屏视频播放等更前台的表现层面。简单来说，WebViewClient 关注的是页面内容的加载和错误处理，而 WebChromeClient 更关注页面视觉反馈和交互体验。二者通常会同时设置，以达到更完善的页面控制，既让网页在内部加载时得到妥善处理，也能为用户提供动态反馈，比如在 actionbar 中显示网页标题或使用进度条显示页面加载情况。

                  在面试中如果让你描述如何处理 WebView 中的链接点击行为，你会怎么说？为何需要覆盖 shouldOverrideUrlLoading() 方法？

                  当用户点击链接时，默认行为可能会是启动系统浏览器加载该链接，但这通常不是我们期望的体验。在 WebView 中，我们希望所有链接都能在当前实例中打开，这就需要覆盖 shouldOverrideUrlLoading() 方法。通过实现该方法，我们可以拦截所有 URL 请求，并返回 false，指示 WebView 自己处理该请求，从而保证了页面在应用内部加载。这个处理不仅可以维护用户在应用内的流畅体验，同时还能让我们根据需要拦截特定链接（例如自定义协议或者登录验证链接），并按业务需求做进一步处理。

                  ──────────────────────────── 【问题4】

                  你能说明一下 WebChromeClient 中 onProgressChanged() 方法的作用吗？说明它在用户体验方面的重要性。

                  【回答4】

                  在 WebChromeClient 中，onProgressChanged() 方法负责监听网页的加载进度。当页面加载时，我们可以实时获得当前的加载百分比，并更新 UI 上的进度条或者进度指示器。这在用户体验方面非常重要，因为它能及时向用户反馈页面加载进度，减少用户因等待而产生的不确定性或焦虑感。特别是对于加载内容较多或者网络环境较差的情况，动态显示进度能使用户感知到应用正在工作，从而提升整体使用体验。

                  ──────────────────────────── 【问题5】

                  针对 SSL 错误和加载错误的问题，WebViewClient 提供了哪些方法可以处理这些异常？你会如何处理？

                  【回答5】

                  WebViewClient 提供了 onReceivedSslError() 和 onReceivedError() 等方法，用于捕捉加载过程中的安全错误和网络错误。onReceivedSslError() 方法使开发者能够捕获 SSL 证书错误，然后可以选择忽略错误或终止页面加载。但从安全角度来看，一般建议对证书错误给予警告或提示用户，以防止中间人攻击。onReceivedError() 方法则可以捕捉加载过程中发生的网络错误、服务器错误等，使我们能在 UI 上提示用户重新加载或显示一个定制的错误页面。通过这两个方法，我们可以更好的控制错误处理流程，确保用户在出现异常情况时获得合理的反馈。

                  ──────────────────────────── 【问题6】

                  请谈谈你的见解，WebChromeClient 如何提升 WebView 的用户体验？你有没有使用过其处理 JavaScript 弹窗的方法？

                  【回答6】

                  WebChromeClient 通过处理网页中的额外视觉和交互细节来提升用户体验。举例来说，通过重写 onReceivedTitle() 方法，我们可以将网页标题动态地显示在应用的 ActionBar 或 Toolbar 上，使页面信息更加清晰。同时，onJsAlert()、onJsConfirm() 和 onJsPrompt() 方法允许我们以更符合应用风格的方式显示 JavaScript 弹窗，比起默认的弹窗样式更符合整体设计风格。此外，如果网页中嵌入了视频或者需要全屏播放，WebChromeClient 中的 onShowCustomView() 和 onHideCustomView() 方法能帮助我们实现全屏切换，这对于视频播放类应用尤为重要。通过这些机制，WebChromeClient 提升了网页在应用内部的集成度和交互性，使整体用户体验更加流畅和专业。

                  ──────────────────────────── 【问题7】

                  在实际应用中，有时会同时设置 WebViewClient 和 WebChromeClient。请解释为什么你会同时使用这两者，并说明它们如何协同工作以改善用户体验？

                  【回答7】

                  在实际应用中，同时设置 WebViewClient 和 WebChromeClient 是非常常见的做法。WebViewClient 专注于拦截 URL 请求、处理页面加载开始和结束、管理错误情况以及确保链接在当前 WebView 内部打开，从而保证内容加载的稳定性。而 WebChromeClient 则增强了视觉反馈和与用户的互动，比如更新加载进度、显示网页标题、处理 JavaScript 弹窗以及支持全屏视频播放。当二者配合使用时，WebView 能够同时处理后台加载逻辑和前端交互细节，确保用户不仅在内容加载上得到完整控制，同时在视觉和交互体验上也达到原生的标准。这种协同工作模式保证了内嵌网页能在应用中无缝运行，并为用户提供一致且高质量的体验。

                  ──────────────────────────── 【问题8】

                  如果面试官问你关于安全性问题，比如如何防止 WebView 中加载恶意内容或未知网站，你会怎么回答？

                  【回答8】

                  在 WebView 中加载内容时，安全性始终是重要的考量。首先，应该限制 WebView 加载受信任的 URL，可以通过 URL 白名单来控制加载行为。此外，避免暴露不必要的 JavaScript 接口，或者仅在非常可信的情况下暴露这些接口。对于处理 SSL 错误，也应当谨慎对待而不是简单忽略，以免导致安全隐患。在实际开发中，还可以开启混合内容保护，在高版本 Android 中通过 WebSettings 控制是否允许加载非 HTTPS 内容。总之，在设计时应从架构上减少风险，并配合用户提示和日志记录，便于及时发现和处理异常情况。

                  ──────────────────────────── 【问题9】

                  对于混合开发的场景，比如 Android 应用内嵌 WebView 与部分原生功能的交互，你如何看待 WebViewClient 和 WebChromeClient 在这一场景中的作用？

                  在混合开发场景中，WebView 不仅仅是简单显示内容，而是与原生功能紧密结合的关键组件。WebViewClient 能够保证所有链接和页面导航都在当前应用中进行，从而保持流畅的用户体验；而 WebChromeClient 则让网页能够动态反馈状态，比如更新标题、进度、视频全屏切换等，使得应用界面更具有一致性。同时，通过 JavaScriptInterface，我们能让网页与原生代码进行双向通信，这也依赖于 WebView 的稳定运行。总之，这两个组件为混合开发提供了低耦合、高灵活的整合方案，使得原生和 Web 内容能够无缝衔接，共同工作。