样式表规则仅在 iphone 上返回 Null？答案

【问题标题】：Stylesheets Rules Return Null only on iphone?样式表规则仅在 iphone 上返回 Null？
【发布时间】：2021-01-16 11:10:52
【问题描述】：

我正在尝试通过 JavaScript 读取 styleSheet 规则，但 document.styleSheets[0].rules 和 document.styleSheets[0].cssRules 都返回 Null。澄清：如果加载的 CSS 看起来像这样：

.example{
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

使用 Javascript，如果我调用 document.styleSheets[0].rules 假设 css 是 html 文件中的第一个，我应该得到规则数据。但这不会发生。

此问题仅在 iOS 上发生。它在 Safari 上运行良好，在 Android 上也运行良好。

谢谢。

【问题讨论】：

请在您的问题中包含相关代码。
@abney317 我尝试添加一些说明。我不知道如何更好地解释它，我很抱歉。问题是如果您的 html 中有一个 css 文件，您应该能够使用 JS 使用 document.styleSheets[0].cssRules 获取规则列表。它在除科尔多瓦 IOS 之外的所有浏览器上都能正常工作。我猜这可能是对cordova iOS的限制或其他我不知道的东西。谢谢。

标签： javascript css ios cordova safari

【解决方案1】：

所以我解决了这个问题。它似乎是由多种原因引起的。由于这是我第一次在 cordova iOS 中使用我的代码，我想我在第一次添加 cordova-plugin-wkwebview-file-xhr 插件时没有正确修复 WkWebview 的 XHR 已知问题。我认为它没有正确添加。所以我不得不移除 iOS 平台，然后重新开始。我再次添加了 cordova-plugin-wkwebview-file-xhr 并确保我有：

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

在配置文件中，样式规则按应有的方式显示。

【讨论】：

你们救了我的命。这是个奇怪的问题。它在 Cordova 和 iOS 13 上运行良好。但至少对于 iOS14.6，读取 cssRules 时出错。