Chrome 64 Uncaught DOMException：无法执行＆＃39; insertRule＆＃39; on＆＃39; CSSStyleSheet＆＃39;：无法访问StyleSheet以插入规则

Question

啊！我的网站在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">

Answer 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">

Answer 2

在我的情况下，这是adblock在给我玩的把戏，将其关闭，消息应该消失

Answer 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)