如何解决Javascript:DOMException:无法从“CSSStyleSheet”读取“cssRules”属性:无法访问规则
我收到 DOMException: Failed to read the 'cssRules' property from 'CSsstyleSheet': Cannot access rules 。任何建议我如何解决相同的问题。
示例代码
function copyStyles(source,target) {
Array.from(source.styleSheets).forEach(styleSheet => {
let rules
try {
rules = styleSheet.cssRules
} catch (err) {
console.error(err)
}
if (rules) {
const newStyleEl = source.createElement('style')
Array.from(styleSheet.cssRules).forEach(cssRule => {
.......
})
target.head.appendChild(newStyleEl)
} else if (styleSheet.href) {
..........
}
})
}
解决方法
我建议您避免调用可能通过 CSP 保护的 cssRules,而只需添加一个新样式表,其中包含您想要覆盖现有规则的任何规则。
像这样...
var S=document.createElement('style');
S.innerHTML='#Menu{background:red;} body{overflow:auto;}';
Frame_ID.contentWindow.document.body.appendChild(S);
,
根据 CORS 安全政策,您无法通过 javascript 访问从第三方域加载的资源内容。这也适用于 CSS 文件(尽管尚未在所有浏览器中实现)。
因此,如果 source.styleSheets
之一是第三方 CSS 文件,那么您将在尝试访问 cssRules
的 rules
或 stylesheet
属性时收到此错误}
顺便说一下,作为您正在尝试的解决方案,而不是在 else 部分创建链接标签,获取(通过 xhr 或 fetch
API)stylesheet.href
并且您将在JS 作为可以附加到 DOM 中的样式标签的文本。
示例
fetch(stylesheet.href)
.then(response => response.text())
.then(response => {
const st = document.createElement('style');
st.textContent = response;
document.body.append(st);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。