Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’

Chrome 66 版本出现 Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’: Cannot access StyleSheet to insertRule 同样的页面在 Firefox 下是可以运行的。

经排查,最新版的 Chrome 对于 insertRule 的方式做了限制。

页面使用场景:JS 创建了一个 iframe 然后监听 iframe 的 DOMContentLoaded 事件,在回调函数里面去使用 document.styleSheets[0].insertRule。

Chrome 出于安全考虑对此作了隔离,取代方法:手动创建 style 标签插入​

var css = 'body::-webkit-scrollbar-track-piece { background-color:#f5f5f5; } ' +
    'body::-webkit-scrollbar { width:3px; } ' +
    'body::-webkit-scrollbar-thumb { background:#ccc; } ' +
    'body::-webkit-scrollbar-thumb:hover { background:#999; }';
var head = elIframeDocument.head || elIframeDocument.getElementsByTagName('head')[0];
var style = elIframeDocument.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(elIframeDocument.createTextNode(css));
}

head.appendChild(style);