Chrome 64中使用JavaScript insertRule操作外部样式表失败的原因？

哇，这个问题太有针对性了！Chrome 64确实有个独有的小坑导致这个报错，我来给你拆解清楚：

核心原因 #

Chrome 64对同域外部样式表的访问权限做了过于严格的阶段性限制——哪怕样式表和HTML文件在同一目录（完全同域），只要样式表还没完成加载，浏览器就会把它标记为「不可访问」状态，这时候调用insertRule就会触发DOMException。

而其他浏览器（FireFox、移动端Safari，甚至后续版本的Chrome）的逻辑更合理：对于同域样式表，即使还在加载中，也允许脚本访问并修改它，所以不会出现这个报错。

另外，你把脚本放在<body>底部只能保证DOM结构加载完成，但无法保证外部样式表已经加载完毕——样式表的加载是异步的，完全可能晚于脚本执行时机。

解决办法 #

这里有几个靠谱的方案，你可以根据场景选：

• 等待样式表加载完成再操作
  监听样式表对应<link>标签的load事件，确保样式表加载完成后再调用insertRule：

  // 获取页面中的第一个样式表（也就是你的外部样式表）
  const targetSheet = document.styleSheets[0];
  // 先检查是否能访问cssRules，能的话直接操作
  if (targetSheet.cssRules) {
    targetSheet.insertRule('.your-selector { property: value; }', 0);
  } else {
    // 不能访问的话，监听link标签的load事件
    targetSheet.ownerNode.addEventListener('load', () => {
      targetSheet.insertRule('.your-selector { property: value; }', 0);
    });
  }
  

• 改用内联样式表修改
  如果你的样式修改不需要依赖外部样式表的内容，完全可以创建一个新的<style>标签插入页面，避开对外部样式表的操作：

  const styleEl = document.createElement('style');
  styleEl.textContent = '.your-selector { property: value; }';
  document.head.appendChild(styleEl);
  

• 延迟脚本执行时机
  把脚本逻辑放在window.onload事件里（这个事件会等待所有资源包括样式表加载完成），不过这种方式会让脚本执行更晚，可能影响体验，按需使用：

  window.onload = function() {
    const targetSheet = document.styleSheets[0];
    targetSheet.insertRule('.your-selector { property: value; }', 0);
  };
  

补充说明 #

这个问题是Chrome 64版本的一个阶段性行为，后续Chrome版本已经修复了这个过于严格的权限判断逻辑，所以只有这个特定版本会出现这个问题。

内容的提问来源于stack exchange，提问作者Gergő Horváth