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

您可以通过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 2

如果您正在寻找最短的解决方案，那怎么办？

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

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

从我做过的所有测试来看，当您使用[0]而不是[6]或任何其他值时，您尝试的最终尝试似乎完美无缺。另外，为什么有多个头部标签？这是拼写错误，您的意思是标题吗？似乎可以使用任何数量的标题。

但是实际上，如果可能的话，这类事情应该通过后端处理。

Answer 5

虽然这里的其他答案正确地描述了如何在脚本中执行此操作，但我要注意三件事：

您应该在构建时使用哈希而不是时间戳来执行此操作，否则，每次清除缓存更改的日期时，都应该清除它。那不是很好的用户体验。请谨慎确定何时以及为什么要获取此信息。 Webpack有一个nifty build plugin用于在文件名中创建哈希。
使用headers驱动是否应提取新文件。
确保在任何运行时async元素上设置<script>属性，否则会降低性能，有时甚至会降低性能。搜索引擎对此不利。

```

但是请注意，无论使用async属性如何添加脚本标签都将阻止呈现。 Read this for more details。

Answer 6

您似乎对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进行归档。

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

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

document.head.appendChild(script);

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

Answer 7

您的脚本未加载，因为它不是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 8

我尝试使用上面的一些示例，但是性能会受到影响，因为js文件会在用户每次登录时加载。

以下方法将确保仅在您提供新版本时才加载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>

Answer 9

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(...){}中添加适当的条件

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

9 个答案: