更新 css href 中的随机数

Question

我的 html 中有一个 css link 标签，就像这样

<link rel="stylesheet" href="skin.css">

我想将保存在本地存储中的随机数添加到 href，如下所示

<link rel="stylesheet" href="skin.css?cb=sessionStorage.cbVersion">

我知道我们可以为此分配一个 id，然后更改 href 属性值，但我想知道是否有任何方法可以在不编写任何额外逻辑的情况下实现同样的事情。

Answer 1

CSS 是静态的。如：它总是将 href 属性的值解析为字符串。因此，鉴于以上情况，它将尝试访问 {your-domain}/skin.css?cb=sessionStorage.cbVersion.

如果你需要它是可变的，你有两个选择：

在服务器端使用您在服务器端使用的语言（php、Java、Java、等等...)
在客户端使用Java脚本（在浏览器中加载页面时）。

在第二种情况下，您不必使用 id，尽管这是定位元素的常用（推荐）方法。但是您需要一种方法来唯一标识您的元素，以便您可以更改其 href.

简单示例：

<link rel="stylesheet" data-href="dynamic-stylesheet">
<script>
  const link = document.querySelector('link[data-href="dynamic-stylesheet"]');
  link.href = `skin.css?cb=${sessionStorage.cbVersion || 'defaultValue'}`;
</script>

请注意，这在 Whosebug 上不起作用，因为代码段被沙盒化并且不允许访问 sessionStorage。

另请注意，我完全删除了 href，因为如果存在且无效，它将导致 404 错误，因为它会在 <link> 出现时被解析已解析，必须在您运行您的脚本之前。或者，作为替代方案，您根本无法拥有 <link> 并使用 JavaScript 创建它，并具有所需的 href 值。

最后但并非最不重要的一点是，当在 sessionStorage 上找不到 cbVersion 时，您应该始终提供默认值。上述脚本的改进版本将使用 try/catch 来检索 sessionStorage 值，并在结果值仍然为假时提供 defaultValue：

<link rel="stylesheet" data-href="dynamic-stylesheet">
<script>
  const link = document.querySelector('link[data-href="dynamic-stylesheet"]');
  let cbVersion;
  try {
    cbVersion = sessionStorage.cbVersion;
  } catch(err) { 
    //console.log(err)
  }
  link.href = `skin.css?cb=${cbVersion || 'defaultValue'}`;
</script>

如您所见，上面尝试加载 https://stacksnippets.net/skin.css?cb=defaultValue（不存在），并且不会输出有关无法访问 sessionStorage 的错误。

更新 css href 中的随机数

Update Random Number in css href

html

css

caching

href