处理类似于<link rel="stylesheet">的<?xml-stylesheet>？
在调查附加<?xml-stylesheet>处理指令的CSS的优缺点的过程中，我遇到了一些问题。
假设我们有一个简单的XHTML文档(以application/xhtml+xml MIME类型交付，并在网页浏览器中查看)：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A sample XHTML document</title>
<script type="application/javascript" src="/script.js"></script>
</head>
<body>
<h1>A heading</h1>
</body>
</html>然后我们有一个外部CSS文件(将其命名为style.css并放在根目录中)：
h1 { color: red; }首先，在script.js中，我用link元素动态地附加了这个CSS：
const link = document.createElement('link');
Object.entries({rel: 'stylesheet', type: 'text/css', href: '/style.css'})
.forEach(([name, value]) => link.setAttribute(name, value));
document.head.appendChild(link);然后，脚本等待样式表完成加载并通过sheet属性到达它：
link.addEventListener('load', function() {
const stylesheet = link.sheet;
});在此之后，脚本可以操作此样式表，例如：
stylesheet.cssRules.item(0).style.color = 'green'; // modify an existing rule
stylesheet.insertRule('body { background: #ffc; }', 1); // insert a new rule但是现在，如果样式表附加了<?xml-stylesheet>处理指令，我不能确定是否可以进行同样的操作：
const pi = document.createProcessingInstruction('xml-stylesheet',
'href="/style.css" type="text/css"');
document.insertBefore(pi, document.documentElement);首先，PI似乎没有load事件，所以脚本不能知道样式表什么时候准备好。其次，没有类似于sheet属性的东西，所以您不能调用pi.sheet来访问样式表。
有没有办法克服这些困难，并从脚本转到与<?xml-stylesheet> PI关联的样式表？
回答 1
Stack Overflow用户
发布于 2017-01-07 03:07:17
首先，PI似乎没有load事件，因此脚本无法知道样式表何时准备就绪。
您可以使用PerformanceObserver检查请求和加载的资源。迭代document的节点，检查.nodeType 7或.nodeType 8，因为ProcessingInstruction节点可能具有comment .nodeType。从性能条目获取"resource"属性。对于href="URL"处的URL，解析过滤节点的.nodeValue，检查value是否等于性能条目的"resource"，然后检查.styleSheet .href值是否等于解析的URL，以及解析的URL是否等于性能条目的"resource"属性值。如果为true，则迭代ProcessingInstruction节点上加载的styleSheet的.cssRules或.rules。
window.onload = () => {
let resource;
const observer = new PerformanceObserver((list, obj) => {
for (let entry of list.getEntries()) {
for (let [key, prop] of Object.entries(entry.toJSON())) {
if (key === "name") {
resource = prop;
var nodes = document.childNodes;
_nodes: for (let node of nodes) {
if (node.nodeType === 7 || node.nodeType === 8
&& node.nodeValue === pi.nodeValue) {
let url = node.baseURI
+ node.nodeValue.match(/[^href="][a-z0-9/.]+/i)[0];
if (url === resource) {
observer.disconnect();
// use `setTimeout` here for
// low RAM, busy CPU, many processes running
let stylesheets = node.rootNode.styleSheets;
for (let xmlstyle of stylesheets) {
if (xmlstyle.href === url && url === resource) {
let rules = (xmlstyle["cssRules"] || xmlstyle["rules"]);
for (let rule of rules) {
// do stuff
console.log(rule, rule.cssText, rule.style, xmlstyle);
break _nodes;
}
}
}
}
}
}
}
}
}
});
observer.observe({
entryTypes: ["resource"]
});
const pi = document.createProcessingInstruction('xml-stylesheet',
'href="style.css" type="text/css"');
document.insertBefore(pi, document.documentElement);
}plnkr http://plnkr.co/edit/uXfSzu0dMDCOfZbsdA7n?p=preview
您还可以使用MutationObserver、setTimeout()来处理
内存不足，CPU繁忙，多个进程在运行
window.onload = function() {
let observer = new MutationObserver(function(mutations) {
console.log(mutations)
for (let mutation of mutations) {
for (let node of mutation.addedNodes) {
if (node.nodeName === "xml-stylesheet") {
let url = node.baseURI
+ node.nodeValue.match(/[^href="][a-z0-9/.]+/i)[0];
setTimeout(function() {
for (let style of document.styleSheets) {
if (style.href === url) {
observer.disconnect();
// do stuff
console.log(style)
}
}
// adjust `duration` to compensate for device
// low RAM, busy CPU, many processes running
}, 500)
}
}
}
});
observer.observe(document, {
childList: true
});
const pi = document.createProcessingInstruction('xml-stylesheet',
'href="style.css" type="text/css"');
document.insertBefore(pi, document.documentElement);
}plnkr http://plnkr.co/edit/AI4QZiBUx6f1Kmc5qNG9?p=preview
或者，使用XMLHttpRequest()或fetch()请求.css文件，创建<style>元素并将其附加到document，填充响应文本，将style元素的.textContent设置为调整后的css文本。
https://stackoverflow.com/questions/41497274
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号