？-6ren"> ？-在调查使用 附加 CSS 的优缺点时处理指令，我遇到了一些问题。 假设我们有一个简单的 XHTML 文档(以 application/xhtml+xml MIME 类型提供并在 Web 浏览器中查看-6ren">
个人中心
gpt4 book ai didi

javascript - 处理 类似于 ？

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:40:37 26 4
gpt4 key购买 nike

在调查使用 <?xml-stylesheet> 附加 CSS 的优缺点时处理指令，我遇到了一些问题。

假设我们有一个简单的 XHTML 文档(以 application/xhtml+xml MIME 类型提供并在 Web 浏览器中查看):

<!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属性(property)，所以你不能调用pi.sheet到达样式表。

有什么方法可以克服这些困难并从脚本到与 <?xml-stylesheet> 关联的样式表吗？ PI?

最佳答案

First, PI seem not to have load event, so the script cannot know when the stylesheet is ready.

您可以使用 PerformanceObserver检查请求和加载的资源。迭代 document 的节点, 检查 .nodeType 7或 .nodeType 8 , 作为 ProcessingInstruction节点可以有 comment .nodeType .得到 "resource"性能条目的属性。解析 .nodeValue在 href="URL" 处为 URL 过滤的节点, 检查值是否等于 "resource"性能条目，然后检查是否 .styleSheet .href value 等于解析的 URL，如果解析的 URL 等于性能条目 "resource"适当的值(value)。如果true , 迭代 .cssRules或 .rules的 styleSheet加载于 ProcessingInstruction节点。

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()处理

low RAM, busy CPU, many processes running

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 , 处理响应文本，设置 .textContent的 style要调整的元素 css文本。

关于javascript - 处理 <?xml-stylesheet> 类似于 <link rel ="stylesheet">？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41497274/

26 4 0
文章推荐： ios - 并发 NSOperationQueue 上传后跟一个任务
文章推荐： android - 无休止地接收分块数据
文章推荐： javascript - 在 AngularJS 中将数据表移动到表
文章推荐： android - Android 上的嵌套滚动
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com