WebView中API28可执行的删CSS超链接JS代码在API23失效如何修复？

我来帮你拆解下为什么这段代码在API23（Android 6）的WebView里失效，然后一步步解决问题：

核心问题排查 #

你的代码在API28正常但API23失效，大概率不是evaluateJavascript本身的问题，而是JS代码里的兼容性或依赖问题：

1. ES6语法不兼容：Object.assign是ES6新增的方法，Android 6的WebView默认JS引擎对ES6特性支持有限，执行到这一行就会报错中断，后面删除CSS链接的代码根本没机会运行。
2. jQuery依赖缺失：代码里用了$()语法，如果目标页面没有引入jQuery库，在旧WebView里会直接抛出$ is not defined的错误，导致后续代码终止。
3. 脆弱的DOM选择器：用nth-child定位link标签完全依赖DOM结构的固定顺序，只要页面多一个meta/script标签，选择器就会失效，根本选不到要操作的元素。

分步修复方案 #

1. 替换ES6语法为ES5兼容写法 #

把Object.assign的写法改成ES5原生的属性赋值，确保旧WebView能解析：

// 原来的ES6写法
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' }));

// 替换为ES5写法
var styleEl = document.createElement('style');
styleEl.innerText = '*{visibility:hidden}' + selector + '{visibility:visible}';
document.head.appendChild(styleEl);

2. 移除jQuery依赖，改用原生JS操作DOM #

如果页面没有引入jQuery，$会直接报错。把所有jQuery操作换成原生JS的DOM API，同时增加存在性判断避免报错中断：

// 原来的jQuery写法
$("body > link:nth-child(1)").removeAttr("href");

// 替换为原生JS写法
var targetLink = document.querySelector("body > link:nth-child(1)");
if(targetLink) targetLink.removeAttribute("href");

3. 优化DOM选择器的可靠性 #

放弃依赖位置的nth-child，改用更稳定的属性选择器定位CSS链接，比如通过rel="stylesheet"来匹配所有样式表：

// 移除所有CSS样式表的href（按需调整）
var styleLinks = document.querySelectorAll('link[rel="stylesheet"]');
for(var i=0; i<styleLinks.length; i++){
    styleLinks[i].removeAttribute('href');
}

// 或者只移除特定CSS（比如根据href包含的关键词）
var targetLinks = document.querySelectorAll('link[href*="your-css-filename"]');
for(var i=0; i<targetLinks.length; i++){
    targetLinks[i].removeAttribute('href');
}

4. 开启WebView调试定位问题 #

在API23设备上开启WebView调试，直接查看JS执行的错误日志：

// 在初始化WebView时添加
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

然后用Chrome浏览器打开chrome://inspect连接设备，查看WebView的控制台输出，就能精准定位具体的JS错误。

完整修改后的代码示例 #

WebSettings webSettings = siteView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setDomStorageEnabled(true);
siteView.setInitialScale(200);

// 开启WebView调试（可选，用于排查问题）
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

siteView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(final WebView view, String url) {
        String jsCode = "(function(){" +
                "var selector = '#top1 > p > img';" +
                // ES5兼容的样式添加写法
                "var styleEl = document.createElement('style');" +
                "styleEl.innerText = '*{visibility:hidden}' + selector + '{visibility:visible}';" +
                "document.head.appendChild(styleEl);" +
                "document.body.style.marginLeft = '0px';" +
                "document.body.style.marginTop = '0px';" +
                // 原生JS移除所有CSS样式表的href
                "var styleLinks = document.querySelectorAll('link[rel=\"stylesheet\"]');" +
                "for(var i=0; i<styleLinks.length; i++){" +
                "   styleLinks[i].removeAttribute('href');" +
                "}" +
                // 替换图片资源（增加存在性判断）
                "var targetImg = document.querySelector('#top1 > p > img');" +
                "if(targetImg) targetImg.src = '/ORegMx/capito.png';" +
                "})();";

        if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT){
            view.evaluateJavascript(jsCode, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    // 打印JS执行结果，方便排查
                    Log.d("WebViewJS", "JS执行反馈: " + value);
                }
            });
        } else {
            view.loadUrl("javascript:" + jsCode);
        }
    }
});
siteView.loadUrl(URL);

额外注意事项 #

• 如果页面有动态加载的DOM，可在JS代码里加setTimeout延迟几百毫秒执行，确保DOM完全渲染完成。
• API23的WebView如果加载本地文件，需要确保webSettings.setAllowFileAccess(true)已开启（你已经设置了setAllowUniversalAccessFromFileURLs，通常已经包含这个权限）。

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