为什么CSS和/或JavaScript的行为基于..基于确切的内容？

Question

[虽然在网上搜索了一种使用JavaScript快速创建CSS类并稍后对其进行修改的方法，但我在mozilla Web文档上偶然发现了this示例。

JavaScript代码应更改定义为红色的body元素的背景颜色：

body {
    background-color: red;
}

变成蓝色：

var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor="blue";

但是在iframe they embedded below中，这似乎不起作用。

也没有在他们的CodePen version中执行。但是，背景不再保持红色，而是突然根本没有颜色。

但是JsFiddle上的相同代码确实可以正常工作。

为什么它起作用有时，有时却不起作用？有没有办法使它始终如一地工作？

---

注意：使用Firefox和Google Chrome时，确实会出现上述行为。

Answer 1

在该页面上，我收到此控制台错误：

“拒绝应用来自的样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。”

[现代浏览器中增强的安全措施似乎阻碍了跨iFrame边界的通信，并使代码无法正常工作。