Android WebView（Jetpack Compose Accompanist库）JavaScript及缩放功能失效求助

开发了一个WebView，但实际使用时发现JavaScript和缩放设置均无法正常工作。目前WebView仅能打开页面，但JavaScript完全无法运行。相关函数代码如下：

fun OpenWebView(state: WebViewState) {
    WebView(
        state,
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp),
        onCreated = { webView ->
            webView.settings.javaScriptEnabled = true
            webView.settings.domStorageEnabled = true
            webView.settings.loadWithOverviewMode = true
            webView.settings.useWideViewPort = true
            webView.settings.builtInZoomControls = true
            webView.settings.displayZoomControls = false
            webView.settings.setSupportZoom(true)
            webView.settings.defaultTextEncodingName = "utf-8"
            webView.settings.pluginState = WebSettings.PluginState.ON
        },
        client = remember {
            object :
                AccompanistWebViewClient() {

                }
        },
        chromeClient = remember {
            object : AccompanistWebChromeClient() {

                }
        }
    )
}

解决方案 #

JavaScript不工作的排查与修复 #

• 确认WebViewState加载的URL是否允许JavaScript执行：有些网页本身会限制非同源或特定环境下的JS运行，可先加载包含alert('JS works')的简单测试HTML页面验证。
• 补充开启JavaScriptCanOpenWindowsAutomatically：如果网页需要弹窗或新窗口执行JS，需添加webView.settings.javaScriptCanOpenWindowsAutomatically = true。
• 验证DOM存储权限：依赖localStorage的JS功能需确保domStorageEnabled开启后，WebView有足够存储权限，可在AndroidManifest.xml中添加<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />（旧版本系统适用，新版本可使用Scoped Storage）。
• 检查Accompanist版本：旧版Accompanist WebView可能存在设置不生效的bug，建议升级到最新稳定版。

缩放功能失效的修复 #

• 调整useWideViewPort与loadWithOverviewMode的设置顺序：先设置useWideViewPort = true，再设置loadWithOverviewMode = true，部分设备对设置顺序敏感。
• 拦截修改页面meta标签：若网页自身通过<meta name="viewport" content="user-scalable=no">禁止缩放，WebView的设置会被覆盖，可通过WebViewClient拦截并修改该标签：

  override fun onPageFinished(view: WebView?, url: String?) {
      super.onPageFinished(view, url)
      view?.evaluateJavascript(
          "javascript:(function() { " +
              "var meta = document.querySelector('meta[name=viewport]'); " +
              "meta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes'); " +
          "})()"
      ) {}
  }
  

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