如何使用javascript从WebView中的本地文件操作CSS答案

【问题标题】：How to use javascript to manipulate CSS from local file in WebView如何使用javascript从WebView中的本地文件操作CSS
【发布时间】：2017-10-11 19:53:47
【问题描述】：

我有一些代码应该从 javascript 中操作 CSS。但是，当我将代码移至 Android 中的 file:// 访问（似乎是在 WebView 中运行 Web 应用程序的推荐方法）时，当以下代码尝试运行时出现错误：

return document.styleSheets[0].cssRules[0].style

“cssRules”的值始终为空，这是意料之外的。

我在this file 中找到了这似乎是由于 Chrome 开发人员拒绝修复的 Chromium 中的“错误”。

我想知道这是否真的是我遇到的错误，如果是这样，是否有解决方法。在本地运行时，如何在 WebView 中从 Javascript 操作 CSS？我应该放弃在本地运行的整个概念吗？恐怕还有其他类似的事情会咬我。

【问题讨论】：

在这里找到解决方案stackoverflow.com/questions/4950729/…
@Prerna 我不确定这是否会有所不同，但我目前将我的资产存储在 sdcard 目录中，这样我就可以更新它，而无需为每个微小的东西一遍又一遍地重新安装我的应用程序改变。
@Prerna 另外，看看 loadDataWithBaseURL 我不确定它是否适合这个用例。我有动态加载 javascript 文件和 css 并动态创建 css 的 HTML。这种方法似乎需要完全打破我的网络应用程序的工作方式。

标签： javascript android css webview

【解决方案1】：

在我的代码中我已经调用了：

    webSettings.setAllowFileAccess(true);

但我发现，如果我添加以下代码，它会放宽对本地文件访问的所有安全限制，并且我可以从 Javascript 访问 CSS：

    if (Build.VERSION.SDK_INT >= 16 ) {
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowUniversalAccessFromFileURLs(true);
    }

【讨论】：