Chrome 64 Uncaught DOMException：无法在'CSSStyleSheet'上执行'insertRule'：无法访问StyleSheet以插入规则 [英] Chrome 64 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

问题描述

啊！我的网站在Chrome中已损坏。

Ahh! My site is broken in Chrome.

在控制台中收到此消息：未捕获DOMException：无法在'CSSStyleSheet'上执行'insertRule'：无法访问StyleSheet to insertRule

Getting this message in console: Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

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

It points to this line of code, which is from a third-party plugin:

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

头部定义的样式表：

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

推荐答案

我们认为这是Chromium的根本原因我们的问题：

We believe this commit to Chromium to be the root cause of our issue:

更新行为CSSStyleSheet匹配安全源的规范

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

The quick solution for us was to simply reorder the CSS. It seems that previously the culprit plugin was inserting CSS rules to this remote CSS:

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

只需重新排序我们的样式表，以确保我们网站的脚本处于第一位（ document.styleSheets [0] ），解决了问题：

Simply reordering our stylesheets to ensure a script from our site was in first position (document.styleSheets[0]), fixed the issue:

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

这篇关于Chrome 64 Uncaught DOMException：无法在'CSSStyleSheet'上执行'insertRule'：无法访问StyleSheet以插入规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！