Chrome 64 未捕获的 DOMException：无法在“CSSStyleSheet”上执行“insertRule”：无法访问 StyleSheet 以 insertRule答案

【问题标题】：Chrome 64 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRuleChrome 64 未捕获的 DOMException：无法在“CSSStyleSheet”上执行“insertRule”：无法访问 StyleSheet 以 insertRule
【发布时间】：2018-07-23 05:05:08
【问题描述】：

啊！我的网站在 Chrome 中出现故障。

在控制台中收到此消息：Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

它指向这行代码，来自第三方插件：

document.styleSheets[0].insertRule(rule,0);

head 中定义的样式表：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">

【问题讨论】：

标签： javascript css google-chrome

【解决方案1】：

我们认为对 Chromium 的承诺是我们问题的根本原因：

Update behavior of CSSStyleSheet to match spec for Security origin

我们的快速解决方案是简单地重新排序 CSS。似乎以前的罪魁祸首插件是在这个远程 CSS 中插入 CSS 规则：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">

只需重新排序我们的样式表以确保我们网站的脚本位于首位 (document.styleSheets[0])，即可解决问题：

<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

【讨论】：

【解决方案2】：

在我的情况下，它是 adblock 对我的欺骗，把它关掉，消息就会消失

【讨论】：

谢谢！在调试同样的错误时遇到了很多问题，当 AdBlock 在网站上暂停时它就消失了。

【解决方案3】：

动态添加样式标签

class StyleSheet {
  constructor(name = 'dynamic-styleSheet') {
    this.styleSheet = this.getStyleSheet(name)
  }

  getStyleSheet(name) {
    if (!document.getElementById(name)) {
      const style = document.createElement('style')
      style.title = name
      document.getElementsByTagName('head')[0].appendChild(style)
    }

    let styleSheet = null
    for (let i = 0; i < document.styleSheets.length; i++) {
      styleSheet = document.styleSheets[i]
      if (styleSheet.title === name) {
        break
      }
    }
    return styleSheet
  }
  insertRule(css, index) {
    return this.styleSheet.insertRule(css, index)
  }
  deleteRule(index) {
    this.styleSheet.deleteRule(index)
  }
}
export default StyleSheet
// let styleSheet = new StyleSheet ()
// styleSheet.insertRule('h1{color:red;}', 0)

【讨论】：