根据时间在脚本标签和样式表中附加动态版本（变量）

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

<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>

还有更多方法可以做到。

Answer 2

您可以从 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>

取自 Stack overflow answer

Answer 3

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? 我们如何告诉浏览器 "please check every minute if the condition true" 如果是，那么 append 新 styleFile 和 scriptFile 。
注意：你可以及时提供minutes和seconds，但记得在[=16中添加适当的条件=]

Answer 4

从我所做的所有测试来看，当您使用 [0] 而不是 [6] 或与此相关的任何其他值时，您尝试的最终尝试似乎完美无缺。还有为什么你有多个头标签？这是一个错字，你的意思是 header？它似乎适用于任意数量的 headers.

但如果可能的话，这种事情真的应该通过后端处理。

Answer 5

如果您正在寻找最短的解决方案，这个怎么样？

<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 6

虽然此处的其他答案正确描述了如何在脚本中执行此操作，但我想注意三点：

您应该在构建时使用散列而不是时间戳来执行此操作，否则，每次日期更改时您的缓存都可能被清除。这不是一个很好的用户体验。请注意何时以及为何获取此信息。 Webpack 有一个 nifty build plugin 用于在文件名中创建散列。
使用headers来驱动是否应该获取新文件。
确保在任何运行时间 <script> 元素上设置 async 属性，否则它会降低性能，有时会显着降低。搜索引擎会严厉惩罚这一点。

```

但请注意，无论是否使用 async 属性，附加脚本标签都会阻止渲染。 Read this for more details.

Answer 7

您似乎对 html & javascript 感到困惑。

无法使用与 javascript 混合使用的 html 来存档。

和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)

我们可以在 HTTP 请求返回 html 后用 javascript 存档。

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

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

document.head.appendChild(script);

最好包装一个函数来完成这项工作。

Answer 8

您的脚本未加载，因为它不是 new Date.getTime()，而是 new Date().getTime()，或者只是使用 Date.now()。此外，为了防止浏览器缓存，您可以添加 no-cache header 例如使用 .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 9

我尝试使用上面的一些示例，但性能受到影响，因为 js 文件将加载 every-time 用户登录。

以下方法将确保仅在您提供新构建时才加载 js。

第 1 步： 在您的主布局页面中添加如下所示的隐藏/（非隐藏）元素，这将包含您的最新内部版本号。

<p id="BuildNumber">Build Number : @System.Diagnostics.FileVersionInfo.GetVersionInfo(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "bin", "<yourDllName>.dll")).FileVersion
</p>

第 2 步： 使用下面的脚本标记对您的 js 文件进行版本控制，请根据您的使用情况更新脚本类型。

<script>
    var script = document.createElement('script');
    script.setAttribute('src', '/Scripts/Common/<fileName>.min.js?v=' + document.querySelector('#BuildNumber').innerHTML.split(': ')[1]);
    script.type = 'text/babel';
    document.head.appendChild(script);
</script>

根据时间在脚本标签和样式表中附加动态版本（变量）

Append Dynamic version(variable ) in Script tag and stylesheet based on time

javascript

angular

angular7