启用 CSS LINK 元素不会触发加载事件

Question

我正在增强

vite-plugin-single-spa

。具体来说，我正在处理问题#120。我已经准备好的 PR 几乎可以工作，但我必须考虑到一些在我眼中非常出乎意料的事情：禁用的 CSS LINK 元素在重新启用时会触发网络调用（我觉得没问题），但永远不会触发加载事件，这这是我不满意的部分。

可以在here找到复制品，我在其中使用了一个简单的 Svelte 项目来展示。我无法创建更简单的复制，因为并非每个重新启用的 CSS 链接都会触发网络调用。我猜测这种行为完全由应用于内容的缓存策略控制。例如，重新启用链接元素时，从 JSDelivr 导入 Bootstrap 不会触发网络调用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

因此，从 /public 文件夹导入 CSS 文件的常规 Vite + Svelte 项目适用于演示：

load

事件永远不会触发。

我的问题是，因为我不是 HTML 专家：我是否错误地认为，如果有网络调用，就应该始终有

load

事件？此外：如果我对如何确定网络调用的需要是正确的，那么我如何知道是否会进行网络调用？我在

vite-plugin-single-spa

中的用例需要知道这一点。

Answer 1

在 DOM 中设置

disabled

属性会导致样式表从文档的

Document.styleSheets

列表中删除。

注意：一旦加载并解析了样式表及其所有导入的内容，并且在样式开始应用于内容之前，就会触发

load

事件。

MDN

---

如果您想尝试强制它重新加载文件，可以将查询字符串添加到CSS文件请求并更改它以使缓存无效。

---

如果您想在链接元素上触发加载事件，您可以这样做

const linkEl = document.querySelector('link[rel=stylesheet]')

const loadEv = new Event('load')

linkEl.dispatchEvent(loadEv)

如果您想在每次启用或禁用样式表时触发加载事件，并且由于某种原因不能仅在修改禁用值（例如，不是您的值）的常规事件处理程序中执行此操作，则可以使用观察者。修改MDN 示例，我们会得到类似以下内容：

const targetNode = document.querySelector('link[rel=stylesheet])

// Options for the observer (which mutations to observe)
const config = { attributes: true }

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
      // ... fire load event
    }
  }
}

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);


// If or when necessary, stop observing
observer.disconnect();