Добавить динамическую версию (переменную) в тег Script и таблицу стилей на основе времени

Question

<script src="/assets/abc.js?v='+new Date.getTime();" type="text/javascript"></script>

<link href="/assets/cder.css?v='+new Date.getTime();"  rel="stylesheet"></link>

или

var myVariable = Math.floor(Math.random() * 999999999999);
<script src="/assets/abc.js?v='+myVariable ;" type="text/javascript"></script>

<link href="/assets/cder.css?v='+new Date.getTime();"  rel="stylesheet"></link>

Я пробовал это, как показано ниже, но script is not loading on network tab.

<script type="text/javascript>
    var script = document.createElement('script');
    script.setAttribute('src', '/assets/abc.js?v=' + new Date.getTime());
    var head1 = document.getElementsByTagName("head")[0];
    head1.appendChild(script);
</script>

Я пытаюсь добавить динамическую версию (переменную) в тег скриптаа таблица стилей основана на текущем времени или какой-то динамической переменной?

Если возможно, пожалуйста, помогите мне с кратчайшим и эффективным решением.

Как этого добиться?

Answer 1

Ваш скрипт не загружается, потому что он не new Date.getTime(), а new Date().getTime() или просто использует Date.now().Кроме того, чтобы предотвратить кеш браузера, вы можете добавить заголовок без кеша, например, используя .htaccess

<filesMatch "\.(js|css)">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/javascript "access plus 1 seconds"
ExpiresByType text/css "access plus 1 seconds"
</IfModule>

и для функции javascript

function appendJS(url) {
  var s = document.createElement('script');
  s.src = url + '?v=' + Date.now();
  document.body.appendChild(s);
}

function appendCSS(url) {
  var s = document.createElement('link');
  s.rel = 'stylesheet';
  s.href = url + '?v=' + Date.now();
  document.body.appendChild(s);
}
appendJS('/assets/abc.js');
appendCSS('/assets/cder.css');

Answer 2

В то время как другие ответы здесь правильно описывают, как сделать это в скрипте, я хочу отметить три вещи:

1. Вы должны делать это во время сборки, используя хэши, а не временные метки, иначе каждыйвремя изменения даты ваш кэш может быть очищен.Это не очень хороший пользовательский опыт.Будьте преднамеренными о том, когда и почему вы получаете это.В Webpack есть отличный плагин для сборки для создания хэшей в именах файлов.
2. Используйте заголовки для определения необходимости извлечения нового файла.
3. Убедитесь, что вы устанавливаете атрибут async для любого элемента <script> времени выполненияв противном случае это ухудшает производительность, иногда значительно.Поисковые системы штрафуют это сильно.

`` `

` ``

Но учтите, что добавление тега скрипта независимо от использования атрибута async заблокируетрендеринг. Прочитайте это для более подробной информации .

Answer 3

Кажется, вы запутались с html & javascript.

Невозможно использовать html, который смешан с javascript для архивирования чего-либо.

---

С SSR(Server Side Render)

Использование, например Handlebars или другого шаблонизатора.

timestamp (а также ваш тег версии) должны быть обработанына стороне сервера до создания html.

<script src="/assets/abc.js?v='+new Date.getTime();" type="text/javascript"></script>

<link href="/assets/cder.css?v='+new Date.getTime();"  rel="stylesheet"></link>

---

Без SSR(Server Side Render)

Мы можем архивировать с javascript после того, как html будет возвращеноHTTP request.

let script = document.createElement('script');

script.setAttribute('src', `somefile?v=${Date.now()}`);

document.head.appendChild(script);

Для этой работы лучше обернуть функцию.

Answer 4

Если вы ищете самое короткое решение, как насчет этого?

<script>document.write('<link href="/assets/cder.css?v=' + Date.now() + '" rel="stylesheet" />');</script>

Достойной альтернативой должно быть:

<script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/assets/cder.css?v=' + Date.now();
    document.body.appendChild(link);
</script>

Ну, вы должны экранировать закрывающий тег сценария какНиже:

<script>document.write('<script src="/assets/abc.js?v=' + Date.now() + '"><\/script>');</script>

Пример того, как добавить несколько скриптов:

<script>
  var scripts = [
    '/assets/abc.js',
    '/assets/def.js',
  ];

  for (var i = 0; i < scripts.length; i++) {
    var script = document.createElement('script');
    script.onerror = function() {
      alert('Could not load ' + this.src);
    };
 
    script.src = scripts[i] + '?v=' + Date.now();
    document.body.appendChild(script);
  }
</script>

Answer 5

Из всех проведенных мною испытаний кажется, что последняя попытка, которую вы попробовали, работает безупречно при использовании [0] вместо [6] или любого другого значения в этом отношении.Кроме того, почему у вас есть несколько тегов головы?это была опечатка и вы имели в виду заголовок?похоже, он работает с любым количеством заголовков.

Но на самом деле этот тип вещей должен обрабатываться через бэкэнд, если это возможно.

Answer 6

const time = new Date(2018, 10, 24, 22); // you can provide minutes and seconds if you want
const today = new Date();
const head = document.querySelector('html head');
const body = document.querySelector('html body'); 

const styleFile = '<link href="/assets/cder.css?v=' + today.getTime() + '"  rel="stylesheet"></link>';
const scriptFile = '<script src="/assets/abc.js?v=' + today.getTime() + '" type="text/javascript"></script>';

setInterval(() => {
  if ((time.getDate() === today.getDate()) && (time.getMonth() === today.getMonth()) && (time.getFullYear() === today.getFullYear()) && (time.getHours() === today.getHours())) {
    head.append(styleFile);
    body.append(scriptFile);
  }
}, 60000);

<html>
  <head>
    <!-- here we will append style file -->
  </head>
  <body>
    <div>some dummy text</div>
    <!-- here we will append script file -->
  </body>
</html>

почему setInterval? что, как мы говорим браузеру ", проверяйте каждую минуту, выполняется ли условие" если это так, то append новый styleFile и scriptFile .
Примечание: вы также можете указать minutes и seconds во времени, если хотите, но не забудьте также добавить соответствующее условие в if(...){}

Answer 7

Вы можете сделать это динамически из JavaScript.

<script>
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', '/assets/abc.js?v='+new Date.getTime()); //was missing single quote
document.head.appendChild(my_awesome_script);
</script>

взято из Ответ переполнения стека

Answer 8

<script [src]="'/assets/abc.js?v='+new Date.getTime();" type="text/javascript"></script>

, если она не работает, попытайтесь создать модель и сделайте так:

this.someModel = "/assets/abc.js?v='"+new Date.getTime();
<script [src]="script" type="text/javascript"></script>

, есть и другие способы сделать это.