Android Kotlin中WebView加载XML时调用JS修改样式的问题

核心问题分析 #

WebView加载XML文件时，渲染生成的DOM结构和HTML不同——XML没有<body>标签，你之前调用的document.body会返回null，导致JS代码执行无效。此外，JS代码必须在XML页面完全加载完成后执行，否则DOM节点尚未构建，也会失败。

具体解决步骤 #

1. 确保JS在页面加载完成后执行 #

给WebView设置WebViewClient，监听页面加载完成事件：

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        // 页面加载完成后，JS可正常访问DOM节点
    }
}

2. 调整JS代码适配XML的DOM结构 #

针对XML的DOM结构，修改JS代码：

• 修改背景色：针对XML根元素（document.documentElement）设置样式

// 修改背景色为蓝色
webView.evaluateJavascript("document.documentElement.style.background = '#0000FF';") { result ->
    // 可选：通过回调查看执行结果，排查错误
    Log.d("JSResult", result)
}

• 修改全局字号：选中所有元素统一设置字号

// 将所有元素字号改为18px
webView.evaluateJavascript("document.querySelectorAll('*').forEach(el => el.style.fontSize = '18px');", null)

• 如果XML有特定根节点（比如<article>），可以直接选中该节点：

webView.evaluateJavascript("document.querySelector('article').style.color = '#FF0000';", null)

3. 调试JS执行的技巧 #

• 不要给evaluateJavascript传null作为回调，通过回调结果可以查看JS执行的错误信息：

webView.evaluateJavascript("你的JS代码") { result ->
    Log.d("JS_DEBUG", result)
}

• 如果遇到本地文件权限问题，补充WebView设置：

webSetting.allowFileAccess = true
webSetting.allowFileAccessFromFileURLs = true
webSetting.allowUniversalAccessFromFileURLs = true

4. 绑定ActionBar按钮点击事件 #

在Activity中配置按钮点击逻辑：

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.style_menu, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_change_style -> {
            // 检查页面是否加载完成
            if (webView.progress == 100) {
                webView.evaluateJavascript("document.documentElement.style.background = 'blue';") {
                    Log.d("JSResult", it)
                }
            }
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

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