Android WebView无法执行Quill编辑器<script>标签问题求助

以下是针对性的排查和解决步骤：

1. 补全WebView的JavaScript相关配置 #

仅开启javaScriptEnabled不足以支持Quill的完整特性，需补充以下配置：

val settings = webView.settings
settings.javaScriptEnabled = true
settings.javaScriptCanOpenWindowsAutomatically = true
// 处理混合内容（若Quill从HTTP CDN加载、页面为HTTPS时需开启）
settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
// 必须设置WebChromeClient，否则部分JS交互特性无法正常工作
webView.webChromeClient = WebChromeClient()

2. 确认Quill资源的加载有效性 #

• 若使用CDN引入Quill，确保App已添加网络权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  

  同时检查WebViewClient是否未拦截CDN资源请求。
• 若使用本地Quill文件，确保文件放在assets目录，引入路径正确：

  <script src="file:///android_asset/quill.min.js"></script>
  <link href="file:///android_asset/quill.snow.css" rel="stylesheet">
  

3. 确保脚本在DOM就绪后执行 #

Quill初始化必须等待DOM加载完成，可通过两种方式实现：

方式一：在HTML中绑定DOM加载事件 #

<script>
document.addEventListener('DOMContentLoaded', function() {
  new Quill('#editor', {
    theme: 'snow'
  });
});
</script>

方式二：在WebView页面加载完成后注入脚本 #

webView.webViewClient = object : WebViewClient() {
  override fun onPageFinished(view: WebView?, url: String?) {
    super.onPageFinished(view, url)
    view?.loadUrl("javascript:new Quill('#editor', { theme: 'snow' });")
  }
}

4. 完善缓存与DOM存储设置 #

settings.domStorageEnabled = true // Quill依赖DOM存储特性
settings.cacheMode = WebSettings.LOAD_DEFAULT // 避免缓存无脚本的旧页面
settings.allowFileAccess = true // 加载本地资源时需开启

5. 排查兼容性与调试 #

• 更换Quill版本：部分旧版Quill与WebView内核兼容性较差，尝试使用稳定版（如1.3.7或最新稳定版）。
• 开启WebView调试：

  WebView.setWebContentsDebuggingEnabled(true)
  

  然后在PC端Chrome浏览器打开chrome://inspect连接设备，查看控制台的JS报错或资源加载失败信息，精准定位问题。

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