无需onPageFinished()，在Android WebView中即时隐藏网站Logo

嘿，这个场景我太熟悉了——用onPageFinished()确实会有明显的Logo闪屏问题，体验很不好。给你几个不用等页面加载完成就能快速隐藏Logo的实用方案：

1. 页面加载启动时立即注入JS/CSS隐藏Logo #

这是最常用且高效的方法，在页面开始加载的第一时间就执行隐藏逻辑，用户基本看不到Logo出现的瞬间：

• 首先给WebView开启JavaScript支持：

  webView.getSettings().setJavaScriptEnabled(true);
  

• 重写WebViewClient的onPageStarted()方法，在这里注入隐藏Logo的JS代码（记得把选择器替换成你网站Logo实际的CSS选择器，比如#site-logo、.header-logo这类）：

  webView.setWebViewClient(new WebViewClient() {
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
          super.onPageStarted(view, url, favicon);
          // 编写隐藏Logo的JS脚本
          String hideLogoScript = "javascript:(function() { " +
                  "var logoElement = document.querySelector('#site-logo'); " +
                  "if(logoElement) { " +
                  "   logoElement.style.display = 'none'; " +
                  "   // 也可以用visibility: hidden，避免布局移位，看你需求 " +
                  "   // logoElement.style.visibility = 'hidden'; " +
                  "} " +
                  "})()";
          view.evaluateJavascript(hideLogoScript, null);
      }
  });
  

  这个方法的优势是实现简单，对网站代码没有侵入性，只要选对Logo的CSS选择器就行。

2. 拦截HTML请求，修改源文件后再加载 #

如果你的网站是自己开发可控的，或者能精准定位到Logo的HTML片段，可以直接在WebView加载HTML之前修改内容，从根源上移除或隐藏Logo：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        WebResourceResponse originalResponse = super.shouldInterceptRequest(view, request);
        String targetUrl = "https://your-website-url.com"; // 替换成你的网站地址

        // 只拦截主页面的HTML请求
        if (request.getUrl().toString().startsWith(targetUrl) && originalResponse != null) {
            try {
                // 读取原始HTML内容
                InputStream inputStream = originalResponse.getInputStream();
                String htmlContent = new String(inputStream.readAllBytes(), StandardCharsets.UTF_8);
                
                // 修改HTML：比如给Logo元素添加隐藏样式，或者直接删除对应代码
                htmlContent = htmlContent.replace(
                    "<div id=\"site-logo\" class=\"header-logo\">",
                    "<div id=\"site-logo\" class=\"header-logo\" style=\"display:none;\">"
                );

                // 返回修改后的HTML资源
                return new WebResourceResponse(
                    originalResponse.getMimeType(),
                    originalResponse.getEncoding(),
                    new ByteArrayInputStream(htmlContent.getBytes(StandardCharsets.UTF_8))
                );
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return originalResponse;
    }
});

这个方法完全不会出现Logo闪屏，但需要你对网站的HTML结构足够熟悉，后续如果网站结构变更，要同步更新替换规则。

额外注意事项 #

• 确保CSS选择器的准确性：如果网站不同页面的Logo选择器不一样，要适配所有页面的选择器（比如用多个querySelector或者更通用的选择器）。
• 安全问题：开启JavaScriptEnabled后，如果加载的是不可信的第三方网站，要注意XSS风险；如果是自己的网站，就不用担心这个问题。

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