Обновить случайное число в css href - PullRequest
Новая
       12

Обновить случайное число в css href

0 голосов
/ 05 апреля 2019

У меня есть тег css link в моем html-коде, как этот 

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

Я хочу добавить случайное число, сохраненное в локальном хранилище, в href, как показано ниже 

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

Я знаючто мы можем присвоить этому идентификатор и позже изменить значение атрибута href, но я пытаюсь найти, есть ли способ реализовать то же самое без написания дополнительной логики.

1 Ответ

0 голосов
/ 05 апреля 2019

CSS является статическим.Как в: он всегда будет анализировать значение атрибута href как строку.Поэтому, учитывая вышесказанное, он попытается получить доступ к {your-domain}/skin.css?cb=sessionStorage.cbVersion.

Если вам нужно, чтобы он был переменным, у вас есть два варианта:

  • использовать любую логику, которая вам нужнакогда вы создаете HTML-код своей страницы на стороне сервера, используя язык, который вы используете на стороне сервера (php, Java и т. д.)
  • используйте JavaScript на стороне клиента (когда страница была загружена вбраузер).

Во втором случае вам не нужно использовать 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>

Обратите внимание, что это не будет работать в StackOverflow, поскольку фрагменты помещаются в песочницу и не имеют доступа к sessionStorage.

Также обратите внимание, что я удалил hrefв общем случае, если он присутствует и недействителен, это приведет к ошибке 404, поскольку он будет проанализирован в момент синтаксического анализа <link>, что должно произойти до запуска сценария.Или, в качестве альтернативы, вы не могли бы вообще иметь <link> и создать его с помощью JavaScript с желаемым значением href.

И последнее, но не менее важное, вы всегда должны предоставлять значение по умолчанию для случаев, когдаcbVersion не найдено на sessionStorage.Улучшенная версия вышеуказанного скрипта будет использовать 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 на ТАК.

...