如何在Android现有WebView的指定位置添加自定义下载按钮

核心思路 #

通过向WebView注入自定义JS代码，定位现有复制按钮的DOM节点，在其同级位置插入自定义下载按钮，同时绑定JS和原生端的交互通道，处理下载逻辑。

实现步骤（以Android端为例） #

• 第一步：开启WebView的JS交互权限
  初始化WebView时打开JS支持，同时注册JS和原生交互的接口，用于接收按钮点击后的下载请求。

  webView.settings.javaScriptEnabled = true
  // 注册JS调用原生的接口
  webView.addJavascriptInterface(object {
      @JavascriptInterface
      fun downloadResource(resourceUrl: String) {
          // 原生实现下载逻辑，示例使用系统DownloadManager
          val request = DownloadManager.Request(Uri.parse(resourceUrl))
          request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED)
          val downloadManager = getSystemService(DOWNLOAD_SERVICE) as DownloadManager
          downloadManager.enqueue(request)
      }
  }, "android")
  

• 第二步：页面加载完成后注入JS插入按钮
  监听WebView的页面加载完成回调，注入JS代码完成按钮的创建、插入和事件绑定：

  webView.webViewClient = object : WebViewClient() {
      override fun onPageFinished(view: WebView?, url: String?) {
          super.onPageFinished(view, url)
          val injectJs = """
              (function() {
                  // 请将.copy-btn替换为实际页面中复制按钮的DOM选择器
                  const copyBtn = document.querySelector('.copy-btn');
                  if (!copyBtn) return;
                  // 创建下载按钮
                  const downloadBtn = document.createElement('button');
                  downloadBtn.innerText = '下载';
                  // 自定义按钮样式，和现有复制按钮风格对齐
                  downloadBtn.style = 'margin-left: 8px; padding: 4px 12px; border-radius: 4px; background: #2385bb; color: #fff; border: none; cursor: pointer;';
                  // 绑定点击事件，通知原生处理下载
                  downloadBtn.addEventListener('click', () => {
                      // 可按需传入需要下载的资源地址，示例为当前页面地址
                      window.android.downloadResource(window.location.href);
                  });
                  // 插入到复制按钮的后方
                  copyBtn.parentNode.insertBefore(downloadBtn, copyBtn.nextSibling);
              })();
          """.trimIndent()
          webView.loadUrl("javascript:$injectJs")
      }
  }
  

适配说明 #

• 如果使用iOS WKWebView实现，逻辑和上述方案一致，仅需将Android端的JS注入、交互接口替换为evaluateJavaScript和WKScriptMessageHandler相关API即可
• 复制按钮的DOM选择器需要根据实际加载的页面调整，可通过PC浏览器F12开发者工具选中复制按钮，获取对应的选择器参数
• 按钮样式、下载逻辑可根据业务需求自行调整，无需改动整体插入逻辑

内容的提问来源于stack exchange，提问作者emergingcoders13