Android Studio中使用WebView仅展示指定网页特定部分的问题咨询

前置配置 #

• 先开启WebView的JS和DOM存储权限，否则JS注入无法生效：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
// 可选配置，适配移动端展示
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);

• 自定义WebViewClient，在页面加载完成后执行JS注入，不要在页面加载前注入，否则会找不到DOM元素：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        injectTargetContentJs(view);
    }
});

JS注入逻辑实现 #

你之前的写法不生效有两个原因：

1. getElementsByClassName返回的是元素集合，必须指定下标才能访问单个元素的样式属性
2. 没有传入对应类名，且没有精准定位到你需要的目标元素

推荐使用更精准的querySelector来定位元素，不需要元素有id，用层级、类名组合的CSS选择器即可定位到你要的蓝色选中div：

1. 首先在PC端浏览器打开目标站点，按F12打开开发者工具，找到你需要展示的div节点，右键节点 → 复制 → 复制选择器，即可得到该div的精准CSS选择器
2. 把选择器填入下面的JS逻辑中即可：

private void injectTargetContentJs(WebView webView) {
    String jsCode = "javascript:(function() {" +
            // 替换引号里的内容为你复制的CSS选择器
            "var targetDiv = document.querySelector('复制的选择器粘贴到这里');" +
            "if(targetDiv != null) {" +
                // 直接清空整个页面，只保留你需要的目标div
                "document.body.innerHTML = targetDiv.outerHTML;" +
                // 额外添加移动端适配样式，可按需调整
                "document.body.style.padding = '0';" +
                "document.body.style.margin = '0';" +
                "document.querySelector('*').style.maxWidth = '100%';" +
            "}" +
            "})()";
    // Android 7.0以上推荐用evaluateJavascript，执行效率更高
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        webView.evaluateJavascript(jsCode, null);
    } else {
        webView.loadUrl(jsCode);
    }
}

可选替代方案（隐藏无用元素） #

如果你需要保留页面的原有样式逻辑，不想直接替换整个body，可以选择隐藏所有不需要的元素：

String hideJs = "javascript:(function() {" +
        // 填入所有不需要展示的元素的CSS选择器，多个用逗号分隔
        "var uselessElements = document.querySelectorAll('选择器1, 选择器2, 选择器3');" +
        "for(var i = 0; i < uselessElements.length; i++) {" +
            "uselessElements[i].style.display = 'none';" +
        "}" +
        "})()";

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