By Noxxxx from https://www.noxxxx.com/?post_type=post&p=801
欢迎分享与聚合,尊重版权,可以联系授权
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);