Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’
Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’
上山打老虎了
发布于 2022-06-14 21:52:12
发布于 2022-06-14 21:52:12
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);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年04月27日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读